[Hidden] Update initialWidth propTypes

pages/api/hidden.md

@@ -14,7 +14,7 @@ Responsively hides children based on the selected implementation.
 |:-----|:-----|:--------|:------------|
 | children | node |  | The content of the component. |
 | implementation | enum:&nbsp;'js'&nbsp;&#124;<br>&nbsp;'css'<br> | 'js' | Specify which implementation to use.  'js' is the default, 'css' works better for server side rendering. |
-| initialWidth | number |  | You can use this property when choosing the `js` implementation with server side rendering.<br>As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint |
+| initialWidth | enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br> |  | You can use this property when choosing the `js` implementation with server side rendering.<br>As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint |
 | lgDown | bool | false | If true, screens this size and down will be hidden. |
 | lgUp | bool | false | If true, screens this size and up will be hidden. |
 | mdDown | bool | false | If true, screens this size and down will be hidden. |

src/Hidden/Hidden.d.ts

@@ -3,18 +3,19 @@ import { StandardProps } from '..';
 import { Breakpoint } from '../styles/createBreakpoints';
 
 export interface HiddenProps extends StandardProps<{}, never> {
+  implementation?: 'js' | 'css';
+  initialWidth?: Breakpoint;
+  lgDown?: boolean;
+  lgUp?: boolean;
+  mdDown?: boolean;
+  mdUp?: boolean;
   only?: Breakpoint | Array<Breakpoint>;
-  xsUp?: boolean;
+  smDown?: boolean;
   smUp?: boolean;
-  mdUp?: boolean;
-  lgUp?: boolean;
+  xlDown?: boolean;
   xlUp?: boolean;
   xsDown?: boolean;
-  smDown?: boolean;
-  mdDown?: boolean;
-  lgDown?: boolean;
-  xlDown?: boolean;
-  implementation?: 'js' | 'css';
+  xsUp?: boolean;
 }
 
 declare const Hidden: React.ComponentType<HiddenProps>;

src/Hidden/Hidden.js

@@ -41,7 +41,7 @@ Hidden.propTypes = {
    * For instance, you could be using the user-agent or the client-hints.
    * http://caniuse.com/#search=client%20hint
    */
-  initialWidth: PropTypes.number,
+  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * If true, screens this size and down will be hidden.
    */

src/Hidden/HiddenCss.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Breakpoint } from '../styles/createBreakpoints';
+
+export interface HiddenCssProps {
+  lgDown?: boolean;
+  lgUp?: boolean;
+  mdDown?: boolean;
+  mdUp?: boolean;
+  only?: Breakpoint | Array<Breakpoint>;
+  smDown?: boolean;
+  smUp?: boolean;
+  xlDown?: boolean;
+  xlUp?: boolean;
+  xsDown?: boolean;
+  xsUp?: boolean;
+}
+
+declare const HiddenCss: React.ComponentType<HiddenCssProps>;
+
+export default HiddenCss;

src/Hidden/HiddenCss.js

@@ -97,18 +97,6 @@ HiddenCss.propTypes = {
    * side rendering.
    */
   implementation: PropTypes.oneOf(['js', 'css']),
-  /**
-   * You can use this property when choosing the `js` implementation with server side rendering.
-   *
-   * As `window.innerWidth` is unavailable on the server,
-   * we default to rendering an empty componenent during the first mount.
-   * In some situation you might want to use an heristic to approximate
-   * the screen width of the client browser screen width.
-   *
-   * For instance, you could be using the user-agent or the client-hints.
-   * http://caniuse.com/#search=client%20hint
-   */
-  initialWidth: PropTypes.number,
   /**
    * If true, screens this size and down will be hidden.
    */

src/Hidden/HiddenJs.d.ts

@@ -2,17 +2,18 @@ import * as React from 'react';
 import { Breakpoint } from '../styles/createBreakpoints';
 
 export interface HiddenJsProps {
+  initialWidth?: Breakpoint;
+  lgDown?: boolean;
+  lgUp?: boolean;
+  mdDown?: boolean;
+  mdUp?: boolean;
   only?: Breakpoint | Array<Breakpoint>;
-  xsUp?: boolean;
+  smDown?: boolean;
   smUp?: boolean;
-  mdUp?: boolean;
-  lgUp?: boolean;
+  xlDown?: boolean;
   xlUp?: boolean;
   xsDown?: boolean;
-  smDown?: boolean;
-  mdDown?: boolean;
-  lgDown?: boolean;
-  xlDown?: boolean;
+  xsUp?: boolean;
 }
 
 declare const HiddenJs: React.ComponentType<HiddenJsProps>;

src/Hidden/HiddenJs.js

@@ -95,7 +95,7 @@ HiddenJs.propTypes = {
    * For instance, you could be using the user-agent or the client-hints.
    * http://caniuse.com/#search=client%20hint
    */
-  initialWidth: PropTypes.number,
+  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * If true, screens this size and down will be hidden.
    */

src/Hidden/index.d.ts

@@ -1,4 +1,2 @@
 export { default } from './Hidden';
 export * from './Hidden';
-export { default as HiddenJs } from './HiddenJs';
-export * from './HiddenJs';

src/Hidden/index.js

@@ -1,2 +1 @@
 export { default } from './Hidden';
-export { default as HiddenJs } from './HiddenJs';