[docs] Better generator (#10249)

docs/scripts/buildApi.js

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

docs/src/modules/utils/generateMarkdown.js

@@ -109,18 +109,21 @@ function generatePropType(type) {
       return type.raw;
     }
 
+    case 'shape':
+      return `{${Object.keys(type.value)
+        .map(subValue => {
+          return `${subValue}?: ${generatePropType(type.value[subValue])}`;
+        })
+        .join(', ')}}`;
+
     case 'union':
     case 'enum': {
-      let values = type.value.map(v => v.value || v.name).map(value => {
-        if (typeof value === 'string') {
-          return escapeCell(value);
+      let values = type.value.map(type2 => {
+        if (type.name === 'enum') {
+          return escapeCell(type2.value);
         }
 
-        return `{${Object.keys(value)
-          .map(subValue => {
-            return `${subValue}?: ${generatePropType(value[subValue])}`;
-          })
-          .join(', ')}}`;
+        return generatePropType(type2);
       });
 
       // Display one value per line as it's better for visibility.
@@ -174,14 +177,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/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;{enter?: number, exit?: number}&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/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;{enter?: number, exit?: number}&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;{enter?: number, exit?: number}&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

@@ -14,8 +14,8 @@ filename: /src/Popover/Popover.js
 |:-----|:-----|:--------|:------------|
 | action | func |  | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
 | anchorEl | object |  | This is the DOM element that may be used to set the position of the popover. |
-| anchorOrigin | shape | {  vertical: 'top',  horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
-| anchorPosition | shape |  | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
+| anchorOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'top',  horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
+| anchorPosition | {top?: number, left?: number} |  | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
 | anchorReference | enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'<br> | 'anchorEl' |  |
 | children | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
@@ -32,9 +32,9 @@ filename: /src/Popover/Popover.js
 | onExiting | func |  | Callback fired when the component is exiting. |
 | <span style="color: #31a148">open *</span> | bool |  | If `true`, the popover is visible. |
 | 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)]. |
+| transformOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  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;{enter?: number, exit?: number}&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/snackbar.md

@@ -13,7 +13,7 @@ filename: /src/Snackbar/Snackbar.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | action | node |  | The action to display. |
-| anchorOrigin | shape | {  vertical: 'bottom',  horizontal: 'center',} | The anchor of the `Snackbar`. |
+| anchorOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'bottom',  horizontal: 'center',} | The anchor of the `Snackbar`. |
 | autoHideDuration | number |  | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
 | children | element |  | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. |
 | classes | object |  | Useful to extend the style applied to components. |

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;{enter?: number, exit?: number}&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).