[system] Add useThemeProps & useTheme hooks (#26649)

packages/material-ui-system/package.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@material-ui/private-theming": "5.0.0-alpha.35",
     "@material-ui/styled-engine": "5.0.0-alpha.34",
     "@material-ui/types": "6.0.1",
     "@material-ui/utils": "5.0.0-alpha.35",

packages/material-ui-system/src/colorManipulator.js

@@ -215,7 +215,7 @@ export function emphasize(color, coefficient = 0.15) {
 }
 
 /**
- * Set the absolute transparency of a color.
+ * Sets the absolute transparency of a color.
  * Any existing alpha values are overwritten.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @param {number} value - value to set the alpha channel to in the range 0 - 1

packages/material-ui-system/src/createBox.js

@@ -1,22 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import styled, { ThemeContext } from '@material-ui/styled-engine';
+import styled from '@material-ui/styled-engine';
 import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
-import createTheme from './createTheme';
+import useTheme from './useTheme';
 
-function isObjectEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
-
-const useTheme = (defaultTheme) => {
-  const contextTheme = React.useContext(ThemeContext);
-  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
-};
-
-export const systemDefaultTheme = createTheme();
-
-export default function createBox(defaultTheme = systemDefaultTheme) {
+export default function createBox(defaultTheme) {
   const BoxRoot = styled('div')(styleFunctionSx);
 
   const Box = React.forwardRef(function Box(inProps, ref) {

packages/material-ui-system/src/index.d.ts

@@ -132,4 +132,10 @@ export { SpacingOptions, Spacing } from './createTheme/createSpacing';
 export { default as shape } from './createTheme/shape';
 export * from './createTheme/shape';
 
+export { default as unstable_useThemeProps } from './useThemeProps';
+export { getThemeProps as unstable_getThemeProps } from './useThemeProps';
+
+export { default as useTheme } from './useTheme';
+export * from './useTheme';
+
 export * from './colorManipulator';

packages/material-ui-system/src/index.js

@@ -33,4 +33,7 @@ export { default as styled } from './styled';
 export { default as createTheme } from './createTheme';
 export { default as createBreakpoints } from './createTheme/createBreakpoints';
 export { default as shape } from './createTheme/shape';
+export { default as unstable_useThemeProps } from './useThemeProps';
+export { getThemeProps as unstable_getThemeProps } from './useThemeProps';
+export { default as useTheme } from './useTheme';
 export * from './colorManipulator';

packages/material-ui-system/src/useTheme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './createTheme';
+
+export default function useTheme<T = Theme>(defaultTheme?: T): T;

packages/material-ui-system/src/useTheme.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useTheme as muiUseTheme } from '@material-ui/private-theming';
+import { ThemeContext } from '@material-ui/styled-engine';
+import createTheme from './createTheme';
+
+function isObjectEmpty(obj) {
+  return Object.keys(obj).length === 0;
+}
+
+export const systemDefaultTheme = createTheme();
+
+function useTheme(defaultTheme = systemDefaultTheme) {
+  const muiContextTheme = muiUseTheme();
+  const styledEngineContextTheme = React.useContext(ThemeContext);
+  const contextTheme = muiContextTheme || styledEngineContextTheme;
+  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+}
+
+export default useTheme;

packages/material-ui-system/src/useThemeProps/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './useThemeProps';
+export * from './useThemeProps';
+
+export { default as getThemeProps } from './getThemeProps';

packages/material-ui-system/src/useThemeProps/index.js

@@ -0,0 +1,2 @@
+export { default } from './useThemeProps';
+export { default as getThemeProps } from './getThemeProps';

packages/material-ui-system/src/useThemeProps/useThemeProps.d.ts

@@ -0,0 +1,24 @@
+export interface ThemeWithProps {
+  components?: any;
+}
+
+export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+  components: Record<Name, { defaultProps: infer Props }>;
+}
+  ? Props
+  : {};
+
+export interface AdditionalThemeProps<Theme> {
+  isRtl: boolean;
+  theme: Theme;
+}
+
+export default function useThemeProps<
+  Theme extends ThemeWithProps,
+  Props,
+  Name extends keyof any,
+>(params: {
+  props: Props;
+  name: Name;
+  defaultTheme?: Theme;
+}): Props & ThemedProps<Theme, Name> & AdditionalThemeProps<Theme>;

packages/material-ui-system/src/useThemeProps/useThemeProps.js

@@ -0,0 +1,14 @@
+import getThemeProps from './getThemeProps';
+import useTheme from '../useTheme';
+
+export default function useThemeProps({ props, name, defaultTheme }) {
+  const contextTheme = useTheme(defaultTheme);
+  const more = getThemeProps({ theme: contextTheme, name, props });
+  const theme = more.theme || contextTheme;
+
+  return {
+    theme,
+    isRtl: theme.direction === 'rtl',
+    ...more,
+  };
+}

packages/material-ui-system/src/useThemeProps/useThemeProps.spec.ts

@@ -0,0 +1,32 @@
+import { unstable_useThemeProps as useThemeProps } from '@material-ui/system';
+import { expectType } from '@material-ui/types';
+
+interface SliderProps {
+  track?: boolean;
+  valueLabelDisplay?: boolean;
+  color: 'primary' | 'secondary';
+}
+
+interface Theme {
+  components?: {
+    MuiSlider: {
+      defaultProps: SliderProps;
+    };
+  };
+}
+
+function ThemedComponent() {
+  const props = useThemeProps<Theme, SliderProps, 'MuiSlider'>({
+    props: { color: 'primary' },
+    name: 'MuiSlider',
+  });
+
+  // additional props are valid
+  expectType<boolean, typeof props.isRtl>(props.isRtl);
+  expectType<Theme, typeof props.theme>(props.theme);
+
+  // component's props are valid
+  // Only existence of props is relevant here not type.
+  props.track;
+  props.valueLabelDisplay;
+}

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@material-ui/utils';
-import getThemeProps from '../styles/getThemeProps';
+import { unstable_getThemeProps as getThemeProps } from '@material-ui/system';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';

packages/material-ui/src/styles/useTheme.js

@@ -1,9 +1,9 @@
-import { useTheme as useThemeWithoutDefault } from '@material-ui/private-theming';
+import { useTheme as useThemeSystem } from '@material-ui/system';
 import * as React from 'react';
 import defaultTheme from './defaultTheme';
 
 export default function useTheme() {
-  const theme = useThemeWithoutDefault() || defaultTheme;
+  const theme = useThemeSystem(defaultTheme);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

packages/material-ui/src/styles/useThemeProps.js

@@ -1,15 +1,6 @@
-import getThemeProps from './getThemeProps';
-import useTheme from './useTheme';
+import { unstable_useThemeProps as systemUseThemeProps } from '@material-ui/system';
 import defaultTheme from './defaultTheme';
 
 export default function useThemeProps({ props, name }) {
-  const contextTheme = useTheme() || defaultTheme;
-  const more = getThemeProps({ theme: contextTheme, name, props });
-  const theme = more.theme || contextTheme;
-
-  return {
-    theme,
-    isRtl: theme.direction === 'rtl',
-    ...more,
-  };
+  return systemUseThemeProps({ props, name, defaultTheme });
 }

packages/material-ui/src/useMediaQuery/useMediaQuery.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTheme } from '@material-ui/private-theming';
-import getThemeProps from '../styles/getThemeProps';
+import { unstable_getThemeProps as getThemeProps } from '@material-ui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 
 export default function useMediaQuery(queryInput, options = {}) {