[Hidden] Migrate to emotion

packages/material-ui/src/Hidden/HiddenCss.js

@@ -1,42 +1,79 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import capitalize from '../utils/capitalize';
-import withStyles from '../styles/withStyles';
+import experimentalStyled from '../styles/experimentalStyled';
 import useTheme from '../styles/useTheme';
+import { getHiddenCssUtilityClass } from './hiddenCssClasses';
 
-const styles = (theme) => {
+const useUtilityClasses = (styleProps) => {
+  const { classes, breakpoints } = styleProps;
+
+  const slots = {
+    root: [
+      'root',
+      ...breakpoints.map(({ breakpoint, dir }) => {
+        return dir === 'only'
+          ? `${dir}${capitalize(breakpoint)}`
+          : `${breakpoint}${capitalize(dir)}`;
+      }),
+    ],
+  };
+
+  return composeClasses(slots, getHiddenCssUtilityClass, classes);
+};
+
+const HiddenCssRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'PrivateHiddenCss',
+    slot: 'Root',
+  },
+)(({ theme, styleProps }) => {
   const hidden = {
     display: 'none',
   };
 
-  return theme.breakpoints.keys.reduce((acc, key) => {
-    acc[`only${capitalize(key)}`] = {
-      [theme.breakpoints.only(key)]: hidden,
-    };
-    acc[`${key}Up`] = {
-      [theme.breakpoints.up(key)]: hidden,
-    };
-    acc[`${key}Down`] = {
-      [theme.breakpoints.down(key)]: hidden,
-    };
-
-    return acc;
-  }, {});
-};
+  return {
+    ...styleProps.breakpoints
+      .map(({ breakpoint, dir }) => {
+        if (dir === 'only') {
+          return {
+            [theme.breakpoints.only(breakpoint)]: hidden,
+          };
+        }
+        return dir === 'up'
+          ? {
+              [theme.breakpoints.up(breakpoint)]: hidden,
+            }
+          : {
+              [theme.breakpoints.down(breakpoint)]: hidden,
+            };
+      })
+      .reduce((r, o) => {
+        Object.keys(o).forEach((k) => {
+          r[k] = o[k];
+        });
+        return r;
+      }, {}),
+  };
+});
 
 /**
  * @ignore - internal component.
  */
-function HiddenCss(props) {
-  const { children, classes, className, only, ...other } = props;
+const HiddenCss = React.forwardRef(function HiddenCss(props) {
+  const { children, className, only, ...other } = props;
   const theme = useTheme();
 
   if (process.env.NODE_ENV !== 'production') {
     const unknownProps = Object.keys(other).filter((propName) => {
       const isUndeclaredBreakpoint = !theme.breakpoints.keys.some((breakpoint) => {
         return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
       });
-      return isUndeclaredBreakpoint;
+      return !['classes', 'theme', 'isRtl'].includes(propName) && isUndeclaredBreakpoint;
     });
 
     if (unknownProps.length > 0) {
@@ -48,45 +85,47 @@ function HiddenCss(props) {
     }
   }
 
-  const clsx = [];
-
-  if (className) {
-    clsx.push(className);
-  }
+  const breakpoints = [];
 
   for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
     const breakpoint = theme.breakpoints.keys[i];
-    const breakpointUp = props[`${breakpoint}Up`];
-    const breakpointDown = props[`${breakpoint}Down`];
+    const breakpointUp = other[`${breakpoint}Up`];
+    const breakpointDown = other[`${breakpoint}Down`];
 
     if (breakpointUp) {
-      clsx.push(classes[`${breakpoint}Up`]);
+      breakpoints.push({ breakpoint, dir: 'up' });
     }
     if (breakpointDown) {
-      clsx.push(classes[`${breakpoint}Down`]);
+      breakpoints.push({ breakpoint, dir: 'down' });
     }
   }
 
   if (only) {
     const onlyBreakpoints = Array.isArray(only) ? only : [only];
     onlyBreakpoints.forEach((breakpoint) => {
-      clsx.push(classes[`only${capitalize(breakpoint)}`]);
+      breakpoints.push({ breakpoint, dir: 'only' });
     });
   }
 
-  return <div className={clsx.join(' ')}>{children}</div>;
-}
+  const styleProps = {
+    ...props,
+    breakpoints,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
+  return (
+    <HiddenCssRoot className={clsx(classes.root, className)} styleProps={styleProps}>
+      {children}
+    </HiddenCssRoot>
+  );
+});
 
 HiddenCss.propTypes = {
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
-   */
-  classes: PropTypes.object.isRequired,
   /**
    * @ignore
    */
@@ -145,4 +184,4 @@ HiddenCss.propTypes = {
   xsUp: PropTypes.bool,
 };
 
-export default withStyles(styles, { name: 'PrivateHiddenCss' })(HiddenCss);
+export default HiddenCss;

packages/material-ui/src/Hidden/HiddenCss.test.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender } from 'test/utils';
+import { createMount, createClientRender } from 'test/utils';
 import HiddenCss from './HiddenCss';
 import { createMuiTheme, MuiThemeProvider } from '../styles';
+import classes from './hiddenCssClasses';
 
 const TestChild = () => <div data-testid="test-child">bar</div>;
 
@@ -12,15 +13,6 @@ describe('<HiddenCss />', () => {
    */
   const mount = createMount();
   const render = createClientRender();
-  let classes;
-
-  before(() => {
-    classes = getClasses(
-      <HiddenCss>
-        <div />
-      </HiddenCss>,
-    );
-  });
 
   describe('the generated class names', () => {
     it('should be ok with only', () => {

packages/material-ui/src/Hidden/hiddenCssClasses.d.ts

@@ -0,0 +1,24 @@
+export interface HiddenCssClasses {
+  root: string;
+  xlDown: string;
+  xlUp: string;
+  onlyXl: string;
+  lgDown: string;
+  lgUp: string;
+  onlyLg: string;
+  mdDown: string;
+  mdUp: string;
+  onlyMd: string;
+  smDown: string;
+  smUp: string;
+  onlySm: string;
+  xsDown: string;
+  xsUp: string;
+  onlyXs: string;
+}
+
+declare const hiddenCssClasses: HiddenCssClasses;
+
+export function getHiddenCssUtilityClass(slot: string): string;
+
+export default hiddenCssClasses;

packages/material-ui/src/Hidden/hiddenCssClasses.js

@@ -0,0 +1,26 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getHiddenCssUtilityClass(slot) {
+  return generateUtilityClass('PrivateHiddenCss', slot);
+}
+
+const hiddenCssClasses = generateUtilityClasses('PrivateHiddenCss', [
+  'root',
+  'xlDown',
+  'xlUp',
+  'onlyXl',
+  'lgDown',
+  'lgUp',
+  'onlyLg',
+  'mdDown',
+  'mdUp',
+  'onlyMd',
+  'smDown',
+  'smUp',
+  'onlySm',
+  'xsDown',
+  'xsUp',
+  'onlyXs',
+]);
+
+export default hiddenCssClasses;