[docs] Better generator

docs/scripts/buildApi.js

@@ -64,7 +64,7 @@ function buildDocs(options) {
   reactAPI.pagesMarkdown = pagesMarkdown;
   reactAPI.src = src;
 
-  // if (reactAPI.name !== 'TablePagination') {
+  // if (reactAPI.name !== 'Tabs') {
   //   return;
   // }
 

docs/src/modules/utils/generateMarkdown.js

@@ -111,7 +111,13 @@ function generatePropType(type) {
 
     case 'union':
     case 'enum': {
-      let values = type.value.map(v => v.value || v.name).map(value => {
+      let values = type.value.map(type2 => {
+        if (type2.name) {
+          return generatePropType(type2);
+        }
+
+        const value = type2.value;
+
         if (typeof value === 'string') {
           return escapeCell(value);
         }
@@ -174,14 +180,15 @@ function generateProps(reactAPI) {
       propRaw = `<span style="color: #31a148">${propRaw}\u2009*</span>`;
     }
 
-    const type = prop.flowType || prop.type;
-    if (type && type.name === 'custom') {
+    if (prop.type.name === 'custom') {
       if (getDeprecatedInfo(prop.type)) {
         propRaw = `~~${propRaw}~~`;
       }
     }
 
-    textProps += `| ${propRaw} | ${generatePropType(type)} | ${defaultValue} | ${description} |\n`;
+    textProps += `| ${propRaw} | ${generatePropType(
+      prop.type,
+    )} | ${defaultValue} | ${description} |\n`;
 
     return textProps;
   }, text);

pages/api/backdrop.md

@@ -15,7 +15,7 @@ filename: /src/Modal/Backdrop.js
 | classes | object |  | Useful to extend the style applied to components. |
 | invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
 | <span style="color: #31a148">open *</span> | bool |  | If `true`, the backdrop is open. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/collapse.md

@@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 | collapsedHeight | string | '0px' | The height of the container when collapsed. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/dialog.md

@@ -31,7 +31,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | <span style="color: #31a148">open *</span> | bool |  | If `true`, the Dialog is open. |
 | PaperProps | object |  | Properties applied to the `Paper` element. |
 | transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Fade | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/drawer.md

@@ -21,7 +21,7 @@ filename: /src/Drawer/Drawer.js
 | open | bool | false | If `true`, the drawer is open. |
 | PaperProps | object |  | Properties applied to the `Paper` element. |
 | SlideProps | object |  | Properties applied to the `Slide` element. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | variant | enum:&nbsp;'permanent'&nbsp;&#124;<br>&nbsp;'persistent'&nbsp;&#124;<br>&nbsp;'temporary'<br> | 'temporary' | The type of drawer. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

pages/api/fade.md

@@ -15,7 +15,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
 | in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/grid-list.md

@@ -12,7 +12,7 @@ filename: /src/GridList/GridList.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| cellHeight | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
+| cellHeight | union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
 | <span style="color: #31a148">children *</span> | node |  | Grid Tiles that will be in Grid List. |
 | classes | object |  | Useful to extend the style applied to components. |
 | cols | number | 2 | Number of columns. |

pages/api/grow.md

@@ -15,7 +15,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
 | in | bool |  | If `true`, show the component; triggers the enter or exit animation. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/hidden.md

@@ -19,7 +19,7 @@ Responsively hides children based on the selected implementation.
 | 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. |
 | mdUp | bool | false | If true, screens this size and up will be hidden. |
-| only | union:&nbsp;{0?: undefined, 1?: undefined, 2?: undefined, 3?: undefined, 4?: undefined}&nbsp;&#124;<br>&nbsp;{name?: undefined, value?: undefined}<br> |  | Hide the given breakpoint(s). |
+| only | union:&nbsp;enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br>&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | Hide the given breakpoint(s). |
 | smDown | bool | false | If true, screens this size and down will be hidden. |
 | smUp | bool | false | If true, screens this size and up will be hidden. |
 | xlDown | bool | false | If true, screens this size and down will be hidden. |

pages/api/input.md

@@ -37,7 +37,7 @@ filename: /src/Input/Input.js
 | rowsMax | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Maximum number of rows to display when multiline option is set to true. |
 | startAdornment | node |  | Start `InputAdornment` for this component. |
 | type | string | 'text' | Type of the input element. It should be a valid HTML5 input type. |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;{name?: undefined, value?: undefined}<br> |  | The input value, required for a controlled component. |
+| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/menu.md

@@ -25,7 +25,7 @@ filename: /src/Menu/Menu.js
 | onExiting | func |  | Callback fired when the Menu is exiting. |
 | <span style="color: #31a148">open *</span> | bool |  | If `true`, the menu is visible. |
 | PopoverClasses | object |  | `classes` property applied to the `Popover` element. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | 'auto' | The length of the transition in `ms`, or 'auto' |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | The length of the transition in `ms`, or 'auto' |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/popover.md

@@ -34,7 +34,7 @@ filename: /src/Popover/Popover.js
 | PaperProps | object |  | Properties applied to the `Paper` element. |
 | transformOrigin | shape | {  vertical: 'top',  horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Grow | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/select.md

@@ -26,7 +26,7 @@ filename: /src/Select/Select.js
 | onOpen | func |  | Callback fired when the component requests to be opened. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | open | bool |  | Control `select` open state. You can only use it when the `native` property is `false` (default). |
 | renderValue | func |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;{name?: undefined, value?: undefined}<br> |  | The input value, required for a controlled component. |
+| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/slide.md

@@ -16,7 +16,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 | children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
 | direction | enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'up'&nbsp;&#124;<br>&nbsp;'down'<br> | 'down' | Direction the child node will enter from. |
 | in | bool |  | If `true`, show the component; triggers the enter or exit animation. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/snackbar.md

@@ -30,7 +30,7 @@ filename: /src/Snackbar/Snackbar.js
 | resumeHideDuration | number |  | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
 | SnackbarContentProps | object |  | Properties applied to the `SnackbarContent` element. |
 | transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Slide | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/step-content.md

@@ -14,7 +14,7 @@ filename: /src/Stepper/StepContent.js
 |:-----|:-----|:--------|:------------|
 | children | node |  | Step content. |
 | transition | func | Collapse | Collapse component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;{0?: undefined}<br> | 'auto' | Adjust the duration of the content expand transition. Passed as a property to the transition component.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | Adjust the duration of the content expand transition. Passed as a property to the transition component.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/tabs.md

@@ -19,7 +19,7 @@ filename: /src/Tabs/Tabs.js
 | classes | object |  | Useful to extend the style applied to components. |
 | fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views, like on mobile. |
 | indicatorClassName | string |  | The CSS class name of the indicator element. |
-| indicatorColor | union:&nbsp;string&nbsp;&#124;<br>&nbsp;{0?: undefined, 1?: undefined}<br> | 'secondary' | Determines the color of the indicator. |
+| indicatorColor | union:&nbsp;string&nbsp;&#124;<br>&nbsp;enum:&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'primary'<br><br> | 'secondary' | Determines the color of the indicator. |
 | onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. |
 | scrollButtons | enum:&nbsp;'auto'&nbsp;&#124;<br>&nbsp;'on'&nbsp;&#124;<br>&nbsp;'off'<br> | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them |

pages/api/text-field.md

@@ -64,7 +64,7 @@ For advanced cases, please look at the source of TextField by clicking on the
 | select | bool | false | Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children. |
 | SelectProps | object |  | Properties applied to the `Select` element. |
 | type | string |  | Type attribute of the `Input` element. It should be a valid HTML5 input type. |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;{name?: undefined, value?: undefined}<br> |  | The value of the `Input` element, required for a controlled component. |
+| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The value of the `Input` element, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/zoom.md

@@ -16,7 +16,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
 | in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;shape<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).