[utils] Move @material-ui/core/utils to @material-ui/utils

docs/src/modules/components/AdManager.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
 
 export const AdContext = React.createContext();
 

docs/src/modules/components/BundleSizeIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 export default createSvgIcon(
   <g fill="currentColor" fillRule="nonzero">

docs/src/modules/components/FigmaIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 export default createSvgIcon(
   <g fillRule="nonzero" fill="none">

docs/src/modules/components/MaterialDesignIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 export default createSvgIcon(
   <g fill="none" fillRule="evenodd">

docs/src/modules/components/SketchIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 export default createSvgIcon(
   <g fillRule="nonzero" fill="none">

docs/src/modules/components/ThemeContext.js

@@ -10,7 +10,7 @@ import { useSelector } from 'react-redux';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
 import { blue, pink } from '@material-ui/core/colors';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 

docs/src/modules/components/W3CIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 export default createSvgIcon(
   <g fillRule="nonzero" fill="none">

docs/src/pages/components/icons/CreateSvgIcon.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 const useStyles = makeStyles((theme) => ({
   root: {

docs/src/pages/components/icons/CreateSvgIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { createSvgIcon } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

docs/src/pages/customization/color/ColorTool.js

@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import CheckIcon from '@material-ui/icons/Check';
 import Slider from '@material-ui/core/Slider';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import { DispatchContext } from 'docs/src/modules/components/ThemeContext';
 import ColorDemo from './ColorDemo';
 

packages/material-ui-codemod/src/v5.0.0/utils-imports.js

@@ -0,0 +1,102 @@
+import { dirname } from 'path';
+import addImports from 'jscodeshift-add-imports';
+import getJSExports from '../util/getJSExports';
+
+// istanbul ignore next
+if (process.env.NODE_ENV === 'test') {
+  const resolve = require.resolve;
+  require.resolve = (source) =>
+    resolve(source.replace(/^@material-ui\/core\/es/, '../../../material-ui/src'));
+}
+
+export default function transformer(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const importModule = options.importModule || '@material-ui/core/utils';
+  const targetModule = options.targetModule || '@material-ui/utils';
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+  };
+
+  const root = j(fileInfo.source);
+  const importRegExp = new RegExp(`^${importModule}$`);
+
+  const resultSpecifiers = new Map();
+
+  const addSpecifier = (source, specifier) => {
+    if (!resultSpecifiers.has(source)) {
+      resultSpecifiers.set(source, []);
+    }
+    resultSpecifiers.get(source).push(specifier);
+  };
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (path.value.importKind && path.value.importKind !== 'value') return;
+    const importPath = path.value.source.value.replace(/(index)?(\.js)?$/, '');
+    const match = importPath.match(importRegExp);
+
+    if (!match) return;
+
+    const targetImportPath = targetModule;
+
+    const whitelist = getJSExports(
+      require.resolve(targetImportPath, {
+        paths: [dirname(fileInfo.path)],
+      }),
+    );
+
+    const specifiersLength = path.node.specifiers.length;
+
+    path.node.specifiers.forEach((specifier, index) => {
+      if (!path.node.specifiers.length) return;
+
+      if (specifier.importKind && specifier.importKind !== 'value') return;
+      if (specifier.type === 'ImportNamespaceSpecifier') return;
+      const localName = specifier.local.name;
+      switch (specifier.type) {
+        case 'ImportNamespaceSpecifier':
+          return;
+        case 'ImportDefaultSpecifier': {
+          const moduleName = match[2];
+          if (!whitelist.has(moduleName)) return;
+          addSpecifier(
+            targetImportPath,
+            j.importSpecifier(j.identifier(moduleName), j.identifier(localName)),
+          );
+          path.get('specifiers', index).prune();
+          break;
+        }
+        case 'ImportSpecifier':
+          if (localName === 'createSvgIcon') {
+            addSpecifier('@material-ui/core/SvgIcon', specifier);
+          } else {
+            if (!whitelist.has(specifier.imported.name)) return;
+            addSpecifier(targetImportPath, specifier);
+          }
+
+          if (index === specifiersLength - 1) {
+            for (let i = 0; i <= index; i++) {
+              path.get('specifiers', 0).prune();
+            }
+          }
+
+          break;
+        default:
+          break;
+      }
+    });
+
+    if (!path.node.specifiers.length) path.prune();
+  });
+
+  addImports(
+    root,
+    [...resultSpecifiers.keys()]
+      .sort()
+      .map((source) =>
+        j.importDeclaration(resultSpecifiers.get(source).sort(), j.stringLiteral(source)),
+      ),
+  );
+
+  return root.toSource(printOptions);
+}

packages/material-ui-codemod/src/v5.0.0/utils-imports.test.js

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './utils-imports';
+
+function trim(str) {
+  return str ? str.replace(/^\s+|\s+$/, '') : '';
+}
+
+function read(fileName) {
+  return fs.readFileSync(path.join(__dirname, fileName), 'utf8').toString();
+}
+
+describe('@material-ui/codemod', () => {
+  describe('v5.0.0', () => {
+    describe('utils-imports', () => {
+      it('convert path as needed', () => {
+        const actual = transform(
+          { source: read('./utils-imports.test/actual.js'), path: require.resolve('./utils-imports.test/actual.js') },
+          { jscodeshift: jscodeshift },
+          {},
+        );
+
+        const expected = read('./utils-imports.test/expected.js');
+        expect(trim(actual)).to.equal(trim(expected), 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./utils-imports.test/expected.js'), path: require.resolve('./utils-imports.test/expected.js') },
+          { jscodeshift: jscodeshift },
+          {},
+        );
+
+        const expected = read('./utils-imports.test/expected.js');
+        expect(trim(actual)).to.equal(trim(expected), 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/material-ui-codemod/src/v5.0.0/utils-imports.test/actual.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { refType, HTMLElementType } from '@material-ui/utils';
+import { capitalize } from '@material-ui/core/utils';
+import { ownerDocument, isMuiElement } from '@material-ui/core/utils';
+import { createSvgIcon } from '@material-ui/core/utils';

packages/material-ui-codemod/src/v5.0.0/utils-imports.test/expected.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { refType, HTMLElementType, capitalize, ownerDocument, isMuiElement } from '@material-ui/utils';
+import { createSvgIcon } from '@material-ui/core/SvgIcon';

packages/material-ui-icons/src/utils/createSvgIcon.js

@@ -1 +1 @@
-export { createSvgIcon as default } from '@material-ui/core/utils';
+export { createSvgIcon as default } from '@material-ui/core/SvgIcon';

packages/material-ui-lab/src/LoadingButton/LoadingButton.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize, chainPropTypes } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -7,7 +7,7 @@ import {
   lighten,
   darken,
 } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import SliderUnstyled from '../SliderUnstyled';
 import ValueLabelStyled from './ValueLabelStyled';
 

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
 import {
+  chainPropTypes,
   useIsFocusVisible,
   unstable_useEnhancedEffect as useEnhancedEffect,
   ownerDocument,
   useEventCallback,
   useForkRef,
   capitalize,
   useControlled,
-} from '@material-ui/core/utils';
+} from '@material-ui/utils';
 import ValueLabelComponent from './ValueLabelUnstyled';
 
 function asc(a, b) {

packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import clsx from 'clsx';
 
 const getUtilityClass = (name) => {

packages/material-ui-lab/src/Timeline/Timeline.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import TimelineContext from './TimelineContext';
 

packages/material-ui-lab/src/TimelineContent/TimelineContent.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import TimelineContext from '../Timeline/TimelineContext';

packages/material-ui-lab/src/TimelineDot/TimelineDot.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import { withStyles, useThemeVariants } from '@material-ui/core/styles';
 
 export const styles = (theme) => ({

packages/material-ui-lab/src/TimelineItem/TimelineItem.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize, isMuiElement } from '@material-ui/core/utils';
+import { capitalize, isMuiElement } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import TimelineContext from '../Timeline/TimelineContext';
 import TimelineItemContext from './TimelineItemContext';

packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@material-ui/core/utils';
+import { capitalize } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import TimelineContext from '../Timeline/TimelineContext';

packages/material-ui-lab/src/TreeItem/TreeItem.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { elementTypeAcceptingRef } from '@material-ui/utils';
+import {
+  elementTypeAcceptingRef,
+  ownerDocument,
+  useForkRef,
+  unsupportedProp,
+} from '@material-ui/utils';
 import Collapse from '@material-ui/core/Collapse';
 import { alpha, withStyles } from '@material-ui/core/styles';
-import { ownerDocument, useForkRef, unsupportedProp } from '@material-ui/core/utils';
 import TreeViewContext from '../TreeView/TreeViewContext';
 import { DescendantProvider, useDescendant } from '../TreeView/descendants';
 import TreeItemContent from './TreeItemContent';

packages/material-ui-lab/src/TreeView/TreeView.js

@@ -7,7 +7,7 @@ import {
   useForkRef,
   ownerDocument,
   unstable_useId as useId,
-} from '@material-ui/core/utils';
+} from '@material-ui/utils';
 import TreeViewContext from './TreeViewContext';
 import { DescendantProvider } from './descendants';
 

packages/material-ui-lab/src/TreeView/descendants.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
 
 /** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
  *  Modified slightly to suit our purposes.

packages/material-ui-styles/src/withStyles/withStyles.test.js

@@ -5,7 +5,7 @@ import { stub } from 'sinon';
 import { SheetsRegistry } from 'jss';
 import { Input } from '@material-ui/core';
 import { createClientRender, screen } from 'test/utils';
-import { isMuiElement } from '@material-ui/core/utils';
+import { isMuiElement } from '@material-ui/utils';
 import { createMuiTheme } from '@material-ui/core/styles';
 import StylesProvider from '../StylesProvider';
 import createGenerateClassName from '../createGenerateClassName';

packages/material-ui-styles/src/withTheme/withTheme.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { createClientRender } from 'test/utils';
 import { Input } from '@material-ui/core';
-import { isMuiElement } from '@material-ui/core/utils';
+import { isMuiElement } from '@material-ui/utils';
 import PropTypes from 'prop-types';
 import withTheme from './withTheme';
 import ThemeProvider from '../ThemeProvider';

packages/material-ui-utils/src/capitalize.ts

@@ -0,0 +1,13 @@
+// TODO: error TS7016: Could not find a declaration file for module '../macros/MuiError.macro'. '/tmp/material-ui/packages/material-ui-utils/macros/MuiError.macro.js' implicitly has an 'any' type.
+// import MuiError from '../macros/MuiError.macro';
+// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+//
+// A strict capitalization should uppercase the first letter of each word a the sentence.
+// We only handle the first word.
+export default function capitalize(string: string): string {
+  if (typeof string !== 'string') {
+    throw new Error('Material-UI: capitalize(string) expects a string argument.');
+  }
+
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}