[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/v1.0.0/import-path.test/actual.js

@@ -15,7 +15,6 @@ import List, {
 } from '@material-ui/core/List';
 import Dialog, { DialogTitle } from '@material-ui/core/Dialog';
 import {
-  withMobileDialog,
   DialogActions,
   DialogContent,
   DialogContentText,

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);
+}

packages/material-ui/src/utils/createChainedFunction.js → packages/material-ui-utils/src/createChainedFunction.ts

@@ -1,3 +1,5 @@
+export type ChainedFunction = ((...args: any[]) => void) | undefined | null;
+
 /**
  * Safe chained function
  *
@@ -6,7 +8,9 @@
  * @param {function} functions to chain
  * @returns {function|null}
  */
-export default function createChainedFunction(...funcs) {
+export default function createChainedFunction(
+  ...funcs: ChainedFunction[]
+): (...args: any[]) => never {
   return funcs.reduce(
     (acc, func) => {
       if (func == null) {
@@ -22,10 +26,12 @@ export default function createChainedFunction(...funcs) {
       }
 
       return function chainedFunction(...args) {
+        // @ts-ignore
         acc.apply(this, args);
+        // @ts-ignore
         func.apply(this, args);
       };
     },
     () => {},
-  );
+  ) as (...args: any[]) => never;
 }

packages/material-ui/src/utils/debounce.js → packages/material-ui-utils/src/debounce.ts

@@ -1,9 +1,17 @@
+export interface Cancelable {
+  clear(): void;
+}
+
 // Corresponds to 10 frames at 60 Hz.
 // A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
-export default function debounce(func, wait = 166) {
-  let timeout;
-  function debounced(...args) {
+export default function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number = 166,
+): T & Cancelable {
+  let timeout: any;
+  function debounced(...args: any[]) {
     const later = () => {
+      // @ts-ignore
       func.apply(this, args);
     };
     clearTimeout(timeout);
@@ -14,5 +22,5 @@ export default function debounce(func, wait = 166) {
     clearTimeout(timeout);
   };
 
-  return debounced;
+  return debounced as T & Cancelable;
 }

packages/material-ui/src/utils/deprecatedPropType.js → packages/material-ui-utils/src/deprecatedPropType.ts

@@ -1,8 +1,9 @@
-export default function deprecatedPropType(validator, reason) {
+export default function deprecatedPropType<T>(validator: T, reason: string): T | Function {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
 
+  // @ts-ignore
   return (props, propName, componentName, location, propFullName) => {
     const componentNameSafe = componentName || '<<anonymous>>';
     const propFullNameSafe = propFullName || propName;

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

@@ -8,3 +8,21 @@ export { default as getDisplayName } from './getDisplayName';
 export { default as HTMLElementType } from './HTMLElementType';
 export { default as ponyfillGlobal } from './ponyfillGlobal';
 export { default as refType } from './refType';
+export { default as capitalize } from './capitalize';
+export { default as createChainedFunction } from './createChainedFunction';
+export { default as debounce } from './debounce';
+export { default as deprecatedPropType } from './deprecatedPropType';
+export { default as isMuiElement } from './isMuiElement';
+export { default as ownerDocument } from './ownerDocument';
+export { default as ownerWindow } from './ownerWindow';
+export { default as requirePropFactory } from './requirePropFactory';
+export { default as setRef } from './setRef';
+export { default as unstable_useEnhancedEffect } from './useEnhancedEffect';
+export { default as unstable_useId } from './useId';
+export { default as unsupportedProp } from './unsupportedProp';
+export { default as useControlled } from './useControlled';
+export { default as useEventCallback } from './useEventCallback';
+export { default as useForkRef } from './useForkRef';
+export { default as useIsFocusVisible } from './useIsFocusVisible';
+export { default as getScrollbarSize } from './getScrollbarSize';
+export { detectScrollType, getNormalizedScrollLeft } from './scrollLeft';

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
+
+export interface StyledComponentProps<ClassKey extends string = string> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ClassNameMap<ClassKey>>;
+  innerRef?: React.Ref<any>;
+}
+
+/**
+ * @private ONLY USE FROM WITHIN mui-org/material-ui
+ *
+ * Internal helper type for conform (describeConformance) components that are decorated with `withStyles
+ * However, we don't declare classes on this type.
+ * It is recommended to declare them manually with an interface so that each class can have a separate JSDOC.
+ */
+export type StandardProps<C, Removals extends keyof C = never> = Omit<C, 'classes' | Removals> &
+  // each component declares it's classes in a separate interface for proper JSDOC
+  StyledComponentProps<never> & {
+    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
+    // TODO: Remove implicit props. Up to each component.
+    className?: string;
+    style?: React.CSSProperties;
+  };
+
+export type NamedMuiComponent = React.ComponentType & { muiName: string };
+
+export interface NamedMuiElement {
+  type: NamedMuiComponent;
+  props: StandardProps<{}>;
+  key: string | number | null;
+}
+
+export default function isMuiElement(element: any, muiNames: string[]): element is NamedMuiElement {
+  // @ts-ignore
+  return React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}

packages/material-ui/src/utils/requirePropFactory.js → packages/material-ui-utils/src/requirePropFactory.ts

@@ -1,14 +1,14 @@
-export default function requirePropFactory(componentNameInError) {
+export default function requirePropFactory(componentNameInError: string): any {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
 
-  const requireProp = (requiredProp) => (
-    props,
-    propName,
-    componentName,
-    location,
-    propFullName,
+  const requireProp = (requiredProp: string): any => (
+    props: { [key: string]: any },
+    propName: string,
+    componentName: string,
+    location: string,
+    propFullName: string,
   ) => {
     const propFullNameSafe = propFullName || propName;