Merge remote-tracking branch 'upstream/master' into master

* upstream/master:
  chore: Release 2.0.0-rc.44 🔖
  feat: new extensions hook PropertyDetailsCell + wrap property name into span
  chore: add .vscode to .gitignore (#1416)
  chore: fix tests
  chore: Release 2.0.0-rc.43 🔖
  fix: fix broken observable after mobx upgrade (#1415)
  chore: Release 2.0.0-rc.42 🔖
  chore: update test snapshot (#1414)
  chore: upgrade to mobx@6 (#1412)
  fix: make schema layout more responsive on small screen (#1411)
  docs: unqualify mobx version for react usage (#1380)
  fix: make samples accessible by keyboard (#1401)
  docs: improvements to vendor extensions topic (#1386)
  fix: hide dropdown input on IE 11 (#1403)
  feat: Dockerfile compatible with OpenShift (#1407) (#1408)

.gitignore

@@ -36,3 +36,4 @@ cli/index.js
 stats.json
 yarn.lock
 .idea
+.vscode

.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

CHANGELOG.md

@@ -1,3 +1,32 @@
+# [2.0.0-rc.44](https://github.com/Redocly/redoc/compare/v2.0.0-rc.43...v2.0.0-rc.44) (2020-10-16)
+
+
+### Features
+
+* new extensions hook PropertyDetailsCell + wrap property name into span ([0fae030](https://github.com/Redocly/redoc/commit/0fae03099645bd9d3795709175640583b08dfc3d))
+
+
+
+# [2.0.0-rc.43](https://github.com/Redocly/redoc/compare/v2.0.0-rc.42...v2.0.0-rc.43) (2020-10-13)
+
+
+### Bug Fixes
+
+* fix broken observable after mobx upgrade ([#1415](https://github.com/Redocly/redoc/issues/1415)) ([26c407b](https://github.com/Redocly/redoc/commit/26c407bd0f2bc1ec9881e0a3668e09e645fc0cc0))
+
+
+
+# [2.0.0-rc.42](https://github.com/Redocly/redoc/compare/v2.0.0-rc.41...v2.0.0-rc.42) (2020-10-13)
+
+
+### Bug Fixes
+
+* hide dropdown input on IE 11 ([#1403](https://github.com/Redocly/redoc/issues/1403)) ([6632d84](https://github.com/Redocly/redoc/commit/6632d844536532227cb92290f9fc2b6b2f913270))
+* make samples accessible by keyboard ([#1401](https://github.com/Redocly/redoc/issues/1401)) ([146b38c](https://github.com/Redocly/redoc/commit/146b38c9d0b926765d8e00dd37204c30bf3ac4e0))
+* make schema layout more responsive on small screen ([#1411](https://github.com/Redocly/redoc/issues/1411)) ([84ab95d](https://github.com/Redocly/redoc/commit/84ab95ddc7b5dc159098aecf82ad922ffd4a3093))
+
+
+
 # [2.0.0-rc.41](https://github.com/Redocly/redoc/compare/v2.0.0-rc.40...v2.0.0-rc.41) (2020-09-24)
 
 

README.md

@@ -138,7 +138,7 @@ For npm:
 
 Install peer dependencies required by ReDoc if you don't have them installed already:
 
-    npm i react react-dom mobx@^4.2.0 styled-components core-js
+    npm i react react-dom mobx styled-components core-js
 
 Import `RedocStandalone` component from 'redoc' module:
 

config/docker/Dockerfile

@@ -36,6 +36,18 @@ COPY demo/favicon.png /usr/share/nginx/html/
 COPY config/docker/nginx.conf /etc/nginx/
 COPY config/docker/docker-run.sh /usr/local/bin
 
+# Provide rights to the root group to write to nginx repositories (needed to run in OpenShift)
+RUN chgrp -R 0 /etc/nginx && \
+    chgrp -R 0 /usr/share/nginx/html && \
+    chgrp -R 0 /var/cache/nginx && \
+    chgrp -R 0 /var/log/nginx && \
+    chgrp -R 0 /var/run && \
+    chmod -R g+rwX /etc/nginx && \
+    chmod -R g+rwX /usr/share/nginx/html && \
+    chmod -R g+rwX /var/cache/nginx && \
+    chmod -R g+rwX /var/log/nginx && \
+    chmod -R g+rwX /var/run
+
 EXPOSE 80
 
 CMD ["sh", "/usr/local/bin/docker-run.sh"]

config/docker/README.md

@@ -2,6 +2,8 @@
 
 ## Usage
 
+### Docker
+
 Serve remote spec by URL:
 
     docker run -it --rm -p 80:80 \
@@ -12,13 +14,33 @@ Serve local file:
     docker run -it --rm -p 80:80 \
       -v $(pwd)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
       -e SPEC_URL=swagger.yaml redocly/redoc
-      
+
 Serve local file and watch for updates:
 
     docker run -it --rm -p 80:80 \
       -v $(pwd)/demo/:/usr/share/nginx/html/swagger/ \
       -e SPEC_URL=swagger/swagger.yaml redocly/redoc
 
+### OpenShift
+
+To quote [OpenShift Container Platform-Specific Guidelines](https://docs.openshift.com/container-platform/3.11/creating_images/guidelines.html#openshift-specific-guidelines):
+
+> Support Arbitrary User IDs
+>
+> By default, OpenShift Container Platform runs containers using an arbitrarily assigned user ID. This provides additional security against processes escaping the container due to a container engine vulnerability and thereby achieving escalated permissions on the host node.
+>
+> For an image to support running as an arbitrary user, directories and files that may be written to by processes in the image should be owned by the root group and be read/writable by that group. Files to be executed should also have group execute permissions.
+
+To comply with those requirements the `Dockerfile` contains instructions to adapt the rights for the folders:
+
+- `/etc/nginx` because the `docker-run.sh` script modifies it at startup time
+- `/usr/share/nginx/html` because the `docker-run.sh` script modifies it at startup time
+- `/var/cache/nginx` because the Nginx process writes to it
+- `/var/log/nginx` because the Nginx process writes to it
+- `/var/run` because the Nginx process writes to it
+
+Another issue with OpenShift is that the default exposed port `80` cannot be used as it is restricted. So one needs to use another port like `8080` (using the `PORT` configuration as described below), and then to configure the `container spec` accordingly.
+
 ## Runtime configuration options
 
 - `PAGE_TITLE` (default `"ReDoc"`) - page title

docs/redoc-vendor-extensions.md

@@ -1,8 +1,34 @@
 # ReDoc vendor extensions
-ReDoc makes use of the following [vendor extensions](https://swagger.io/specification/#specificationExtensions)
 
-### Swagger Object vendor extensions
+You can use the following [vendor extensions](https://swagger.io/specification/#specificationExtensions) with Redoc.
-Extend OpenAPI root [Swagger Object](https://swagger.io/specification/#oasObject)
+
+- [Swagger Object](#swagger-object)
+	- [x-servers](#x-servers)
+	- [x-tagGroups](#x-taggroups)
+	- [Tag Group Object](#a-nametaggroupobjectatag-group-object)
+	- [x-ignoredHeaderParameters](#x-ignoredheaderparameters)
+- [Info Object](#info-object)
+	- [x-logo](#x-logo)
+	- [Logo Object](#a-namelogoobjectalogo-object)
+- [Tag Object](#tag-object)
+	- [x-traitTag](#x-traittag)
+	- [x-displayName](#x-displayname)
+- [Operation Object](#operation-object-vendor-extensions)
+	- [x-codeSamples](#x-codesamples)
+	- [Code Sample Object](#a-namecodesampleobjectacode-sample-object)
+- [Parameter Object](#parameter-object)
+	- [x-examples](#x-examples)
+- [Response Object vendor extensions](#response-object-vendor-extensions)
+	- [x-summary](#x-summary)
+- [Schema Object](#schema-object)
+	- [x-nullable](#x-nullable)
+	- [x-extendedDiscriminator](#x-extendeddiscriminator)
+	- [x-additionalPropertiesName](#x-additionalpropertiesname)
+	- [x-explicitMappingOnly](#x-explicitmappingonly)
+
+### Swagger Object
+Extends the OpenAPI root [OpenAPI Object](https://swagger.io/specification/#oasObject)
+
 #### x-servers
 Backported from OpenAPI 3.0 [`servers`](https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#serverObject). Currently doesn't support templates.
 
@@ -12,9 +38,9 @@ Backported from OpenAPI 3.0 [`servers`](https://github.com/OAI/OpenAPI-Specifica
 | :------------- | :-----------: | :---------- |
 | x-tagGroups         | [ [Tag Group Object](#tagGroupObject) ] | A list of tag groups |
 
-###### Usage in Redoc
+###### How to use with Redoc
 `x-tagGroups` is used to group tags in the side menu.
-If you are going to use `x-tagGroups`, please make sure you **add all tags to a group**, since a tag that is not in a group, **will not be displayed** at all!
+Before you use `x-tagGroups`, make sure you **add all tags to a group**, since a tag that is not in a group, **will not be displayed** at all!
 
 #### <a name="tagGroupObject"></a>Tag Group Object
 Information about tags group
@@ -62,8 +88,8 @@ x-tagGroups:
 | x-ignoredHeaderParameters   | [ string ] | A list of ignored headers |
 
 
-###### Usage in Redoc
+###### How to use with Redoc
-`x-ignoredHeaderParameters` is used to specify header parameter names which are ignored by ReDoc
+Use `x-ignoredHeaderParameters` to specify header parameter names which are ignored by ReDoc.
 
 ###### x-ignoredHeaderParameters example
 ```yaml
@@ -77,19 +103,20 @@ x-ignoredHeaderParameters:
   - X-Test-Header
 ```
 
-### Info Object vendor extensions
+### Info Object
-Extends OpenAPI [Info Object](http://swagger.io/specification/#infoObject)
+Extends the OpenAPI [Info Object](http://swagger.io/specification/#infoObject)
 #### x-logo
 
 | Field Name     |	Type	       | Description |
 | :------------- | :-----------: | :---------- |
 | x-logo         | [Logo Object](#logoObject)  | The information about API logo |
 
-###### Usage in Redoc
+###### How to use with Redoc
-`x-logo` is used to specify API logo. The corresponding image are displayed just above side-menu.
+`x-logo` is used to specify API logo. The corresponding image is displayed just above the side-menu.
 
 #### <a name="logoObject"></a>Logo Object
 The information about API logo
+
 ###### Fixed fields
 | Field Name      |	Type	   | Description |
 | :-------------- | :------: | :---------- |
@@ -125,17 +152,16 @@ info:
     altText: "Petstore logo"
 ```
 
+### Tag Object
+Extends the OpenAPI [Tag Object](http://swagger.io/specification/#tagObject)
 
-
-### Tag Object vendor extensions
-Extends OpenAPI [Tag Object](http://swagger.io/specification/#tagObject)
 #### x-traitTag
 | Field Name     |	Type	  | Description |
 | :------------- | :------: | :---------- |
 | x-traitTag     | boolean  | In Swagger two operations can have multiple tags. This property distinguishes between tags that are used to group operations (default) from tags that are used to mark operation with certain trait (`true` value) |
 
-###### Usage in Redoc
+###### How to use with Redoc
-Tags that have `x-traitTag` set to `true` are listed in side-menu but don't have any subitems (operations). Tag `description` is rendered as well.
+Tags that have `x-traitTag` set to `true` are listed in the side-menu but don't have any subitems (operations). It also renders the `description` tag.
 This is useful for handling out common things like Pagination, Rate-Limits, etc.
 
 ###### x-traitTag example
@@ -161,17 +187,19 @@ x-traitTag: true
 | x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
 
 ### Operation Object vendor extensions
-Extends OpenAPI [Operation Object](http://swagger.io/specification/#operationObject)
+Extends the OpenAPI [Operation Object](http://swagger.io/specification/#operationObject)
+
 #### x-codeSamples
 | Field Name     |	Type	  | Description |
 | :------------- | :------: | :---------- |
 | x-codeSamples | [ [Code Sample Object](#codeSampleObject) ]  | A list of code samples associated with operation |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
-`x-codeSamples` are rendered on the right panel of ReDoc
+`x-codeSamples` are rendered on the right panel in ReDoc.
 
 #### <a name="codeSampleObject"></a>Code Sample Object
 Operation code sample
+
 ###### Fixed fields
 | Field Name  |	Type	   | Description  |
 | :---------- | :------: | :----------- |
@@ -194,49 +222,51 @@ lang: JavaScript
 source: console.log('Hello World');
 ```
 
-### Parameter Object vendor extensions
+### Parameter Object
-Extends OpenAPI [Parameter Object](http://swagger.io/specification/#parameterObject)
+Extends the OpenAPI [Parameter Object](http://swagger.io/specification/#parameterObject)
+
 #### x-examples
 | Field Name     |  Type    | Description |
 | :------------- | :------: | :---------- |
 | x-examples | [Example Object](http://swagger.io/specification/#exampleObject)  | Object that contains examples for the request. Applies when `in` is `body` and mime-type is `application/json` |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
-`x-examples` are rendered in the JSON tab on the right panel of ReDoc.
+`x-examples` are rendered in the JSON tab on the right panel in ReDoc.
 
 ### Response Object vendor extensions
-Extends OpenAPI [Response Object](https://swagger.io/specification/#responseObject)
+Extends the OpenAPI [Response Object](https://swagger.io/specification/#responseObject)
 
 #### x-summary
 | Field Name     |	Type	  | Description |
 | :------------- | :------: | :---------- |
 | x-summary      | string   | a short summary of the response |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
-If specified, `x-summary` is used as the response button text. Description is rendered under the button.
+If specified, you can use `x-summary` as the response button text, with description rendered under the button.
+
+### Schema Object
+Extends the OpenAPI [Schema Object](http://swagger.io/specification/#schemaObject)
 
-### Schema Object vendor extensions
-Extends OpenAPI [Schema Object](http://swagger.io/specification/#schemaObject)
 #### x-nullable
 | Field Name     |	Type	  | Description |
 | :------------- | :------: | :---------- |
 | x-nullable | boolean | marks schema as a nullable |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
 Schemas marked as `x-nullable` are marked in ReDoc with the label Nullable
 
 #### x-extendedDiscriminator
-**ATTENTION**: This is ReDoc-specific vendor extension. It won't be supported by other tools.
+**ATTENTION**: This is a ReDoc-specific vendor extension, and is not supported by other tools.
 
 | Field Name     |	Type	  | Description |
 | :------------- | :------: | :---------- |
 | x-extendedDiscriminator | string | specifies extended discriminator |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
 ReDoc uses this vendor extension to solve name-clash issues with the standard `discriminator`.
 Value of this field specifies the field which will be used as a extended discriminator.
 ReDoc displays definition with selectpicker using which user can select value of the `x-extendedDiscriminator`-marked field.
-ReDoc displays the definition which is derived from the current (using `allOf`) and has `enum` with only one value which is the same as the selected value of the field specified as `x-extendedDiscriminator`.
+ReDoc displays the definition derived from the current (using `allOf`) and has `enum` with only one value which is the same as the selected value of the field specified as `x-extendedDiscriminator`.
 
 ###### x-extendedDiscriminator example
 
@@ -276,11 +306,10 @@ PayPalPayment:
           type: string
 ```
 
-In the example above the names of definitions (`PayPalPayment`) are named differently than
+In the example above, the names of definitions (`PayPalPayment`) are named differently than names in the payload (`paypal`) which is not supported by default `discriminator`.
-names in the payload (`paypal`) which is not supported by default `discriminator`.
 
 #### x-additionalPropertiesName
-**ATTENTION**: This is ReDoc-specific vendor extension. It won't be supported by other tools.
+**ATTENTION**: This is a ReDoc-specific vendor extension, and is not supported by other tools.
 
 Extends the `additionalProperties` property of the schema object.
 
@@ -288,7 +317,7 @@ Extends the `additionalProperties` property of the schema object.
 | :------------- | :------: | :---------- |
 | x-additionalPropertiesName | string | descriptive name of additional properties keys  |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
 ReDoc uses this extension to display a more descriptive property name in objects with `additionalProperties` when viewing the property list with an `object`.
 
 ###### x-additionalPropertiesName example
@@ -308,7 +337,7 @@ Player:
 ```
 
 #### x-explicitMappingOnly
-**ATTENTION**: This is ReDoc-specific vendor extension. It won't be supported by other tools.
+**ATTENTION**: This is ReDoc-specific vendor extension, and is not supported by other tools.
 
 Extends the `discriminator` property of the schema object.
 
@@ -316,10 +345,9 @@ Extends the `discriminator` property of the schema object.
 | :------------- | :------: | :---------- |
 | x-explicitMappingOnly | boolean | limit the discriminator selectpicker to the explicit mappings only |
 
-###### Usage in ReDoc
+###### How to use with ReDoc
 ReDoc uses this extension to filter the `discriminator` mappings shown in the selectpicker.
-When set to `true`, the selectpicker will only list the the explicitly defined mappings. When `false`,
+When set to `true`, the selectpicker will only list the the explicitly defined mappings. When `false`, the default behavior is kept, i.e. explicit and implicit mappings will be shown.
-the default behavior is kept, i.e. explicit and implicit mappings will be shown.
 
 ###### x-explicitMappingOnly example
 
@@ -338,5 +366,4 @@ Pet:
       bee: "#/components/schemas/HoneyBee"
 ```
 
-Will show in the selectpicker only the items `cat` and `bee`, even though the `Dog` class inherits from
+Will show in the selectpicker only the items `cat` and `bee`, even though the `Dog` class inherits from the `Pet` class.
-the `Pet` class.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-rc.41",
+  "version": "2.0.0-rc.44",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -12998,9 +12998,9 @@
       "dev": true
     },
     "mobx": {
-      "version": "5.15.4",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.4.tgz",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.0.1.tgz",
-      "integrity": "sha512-xRFJxSU2Im3nrGCdjSuOTFmxVDGeqOHL+TyADCGbT0k4HHqGmx5u2yaHNryvoORpI4DfbzjJ5jPmuv+d7sioFw==",
+      "integrity": "sha512-Pk6uJXZ34yqd661yRmS6z/9avm4FOGXpFpVjnEfiYYOsZXnAxv1fpYjxTCEZ9tuwk0Xe1qnUUlgm+rJtGe0YJA==",
       "dev": true
     },
     "mobx-react": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-rc.41",
+  "version": "2.0.0-rc.44",
   "description": "ReDoc",
   "repository": {
     "type": "git",
@@ -103,7 +103,7 @@
     "jest": "^26.1.0",
     "license-checker": "^25.0.1",
     "lodash": "^4.17.19",
-    "mobx": "^5.15.4",
+    "mobx": "^6.0.1",
     "prettier": "^2.0.5",
     "raf": "^3.4.1",
     "react": "^16.13.1",
@@ -129,7 +129,7 @@
   },
   "peerDependencies": {
     "core-js": "^3.1.4",
-    "mobx": "^4.2.0 || ^5.0.0",
+    "mobx": "^6.0.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "styled-components": "^4.1.1 || ^5.1.1"

src/common-elements/dropdown.ts

@@ -107,6 +107,7 @@ export const StyledDropdown = styled(Dropdown)`
     input {
       cursor: pointer;
       height: 1px;
+      background-color: transparent;
     }
   }
 `;

src/common-elements/fields-layout.ts

@@ -1,6 +1,6 @@
 // import { transparentize } from 'polished';
 
-import styled, { extensionsHook } from '../styled-components';
+import styled, { extensionsHook, media } from '../styled-components';
 import { deprecatedCss } from './mixins';
 
 export const PropertiesTableCaption = styled.caption`
@@ -16,6 +16,11 @@ export const PropertyCell = styled.td<{ kind?: string }>`
   position: relative;
   padding: 10px 10px 10px 0;
 
+  ${media.lessThan('small')`
+    display: block;
+    overflow: hidden;
+  `}
+
   tr:first-of-type > &,
   tr.last > & {
     border-left-width: 0;
@@ -63,7 +68,7 @@ export const PropertyNameCell = styled(PropertyCell)`
   line-height: 20px;
   white-space: nowrap;
   font-size: 13px;
-  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-family: ${(props) => props.theme.typography.code.fontFamily};
 
   &.deprecated {
     ${deprecatedCss};
@@ -77,12 +82,24 @@ export const PropertyNameCell = styled(PropertyCell)`
 export const PropertyDetailsCell = styled.td`
   border-bottom: 1px solid #9fb4be;
   padding: 10px 0;
-  width: ${props => props.theme.schema.defaultDetailsWidth};
+  width: ${(props) => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
 
   tr.expanded & {
     border-bottom: none;
   }
+
+  ${media.lessThan('small')`
+    padding: 0 20px;
+    border-bottom: none;
+    border-left: 1px solid ${(props) => props.theme.schema.linesColor};
+
+    tr.last > & {
+      border-left: none;
+    }
+  `}
+
+  ${extensionsHook('PropertyDetailsCell')};
 `;
 
 export const PropertyBullet = styled.span`
@@ -125,6 +142,20 @@ export const PropertiesTable = styled.table`
     vertical-align: middle;
   }
 
+  ${media.lessThan('small')`
+    display: block;
+    > tr, > tbody > tr {
+      display: block;
+    }
+  `}
+
+  ${media.lessThan('small', false, ' and (-ms-high-contrast:none)')`
+    td {
+      float: left;
+      width: 100%;
+    }
+  `}
+
   &
     ${InnerPropertiesWrap},
     &

src/components/Fields/Field.tsx

@@ -64,7 +64,7 @@ export class Field extends React.Component<FieldProps> {
           onKeyPress={this.handleKeyPress}
           aria-label="expand properties"
         >
-          {name}
+          <span>{name}</span>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
         {required && <RequiredLabel> required </RequiredLabel>}
@@ -72,7 +72,7 @@ export class Field extends React.Component<FieldProps> {
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
         <PropertyBullet />
-        {name}
+        <span>{name}</span>
         {required && <RequiredLabel> required </RequiredLabel>}
       </PropertyNameCell>
     );

src/components/JsonViewer/JsonViewer.tsx

@@ -34,11 +34,11 @@ class Json extends React.PureComponent<JsonProps> {
         <button onClick={this.collapseAll}> Collapse all </button>
       </SampleControls>
       <OptionsContext.Consumer>
-        {options => (
+        {(options) => (
           <PrismDiv
             className={this.props.className}
             // tslint:disable-next-line
-            ref={node => (this.node = node!)}
+            ref={(node) => (this.node = node!)}
             dangerouslySetInnerHTML={{
               __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
             }}
@@ -65,9 +65,8 @@ class Json extends React.PureComponent<JsonProps> {
     }
   };
 
-  clickListener = (event: MouseEvent) => {
+  collapseElement = (target: HTMLElement) => {
     let collapsed;
-    const target = event.target as HTMLElement;
     if (target.className === 'collapser') {
       collapsed = target.parentElement!.getElementsByClassName('collapsible')[0];
       if (collapsed.parentElement.classList.contains('collapsed')) {
@@ -78,12 +77,24 @@ class Json extends React.PureComponent<JsonProps> {
     }
   };
 
+  clickListener = (event: MouseEvent) => {
+    this.collapseElement(event.target as HTMLElement);
+  };
+
+  focusListener = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      this.collapseElement(event.target as HTMLElement);
+    }
+  };
+
   componentDidMount() {
     this.node!.addEventListener('click', this.clickListener);
+    this.node!.addEventListener('focus', this.focusListener);
   }
 
   componentWillUnmount() {
     this.node!.removeEventListener('click', this.clickListener);
+    this.node!.removeEventListener('focus', this.focusListener);
   }
 }
 

src/components/JsonViewer/style.ts

@@ -1,12 +1,13 @@
 import { css } from '../../styled-components';
 
 export const jsonStyles = css`
-  .redoc-json > .collapser {
+  .redoc-json code > .collapser {
     display: none;
+    pointer-events: none;
   }
 
-  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-family: ${(props) => props.theme.typography.code.fontFamily};
-  font-size: ${props => props.theme.typography.code.fontSize};
+  font-size: ${(props) => props.theme.typography.code.fontSize};
 
   white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
   contain: content;
@@ -47,8 +48,32 @@ export const jsonStyles = css`
   }
 
   .collapser {
+    background-color: transparent;
+    border: 0;
+    color: #fff;
+    font-family: ${(props) => props.theme.typography.code.fontFamily};
+    font-size: ${(props) => props.theme.typography.code.fontSize};
     padding-right: 6px;
     padding-left: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    top: 4px;
+    left: -1.5em;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    padding: 2px;
+    &:focus {
+      outline-color: #fff;
+      outline-style: dotted;
+      outline-width: 1px;
+    }
   }
 
   ul {
@@ -83,13 +108,4 @@ export const jsonStyles = css`
   .collapsed > .ellipsis {
     display: inherit;
   }
-
-  .collapser {
-    position: absolute;
-    top: 1px;
-    left: -1.5em;
-    cursor: default;
-    user-select: none;
-    -webkit-user-select: none;
-  }
 `;

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -1,7 +1,7 @@
 // import { transparentize } from 'polished';
 import * as React from 'react';
 
-import styled from '../../styled-components';
+import styled, { media } from '../../styled-components';
 
 import { Link, UnderlinedHeader } from '../../common-elements/';
 import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
@@ -85,11 +85,14 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
 }
 
 const AuthHeaderColumn = styled.div`
-  flex: 1;
+  flex: 1 1 auto;
 `;
 
 const SecuritiesColumn = styled.div`
   width: ${props => props.theme.schema.defaultDetailsWidth};
+  ${media.lessThan('small')`
+    margin-top: 10px;
+  `}
 `;
 
 const AuthHeader = styled(UnderlinedHeader)`
@@ -101,6 +104,10 @@ const Wrap = styled.div`
   width: 100%;
   display: flex;
   margin: 1em 0;
+
+  ${media.lessThan('small')`
+    flex-direction: column;
+  `}
 `;
 
 export interface SecurityRequirementsProps {

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           "deprecated": false,
           "description": "",
           "example": undefined,
-          "expanded": undefined,
+          "expanded": false,
           "explode": false,
           "in": undefined,
           "kind": "field",
@@ -59,7 +59,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           "deprecated": false,
           "description": "",
           "example": undefined,
-          "expanded": undefined,
+          "expanded": false,
           "explode": false,
           "in": undefined,
           "kind": "field",

src/polyfills.ts

@@ -2,6 +2,8 @@ import 'core-js/es/promise';
 
 import 'core-js/es/array/find';
 import 'core-js/es/object/assign';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/is';
 import 'core-js/es/string/ends-with';
 import 'core-js/es/string/starts-with';
 

src/services/MenuStore.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 import { querySelector } from '../utils/dom';
 import { SpecStore } from './models';
 
@@ -76,6 +76,8 @@ export class MenuStore {
    * @param scroll scroll service instance used by this menu
    */
   constructor(spec: SpecStore, public scroll: ScrollService, public history: HistoryService) {
+    makeObservable(this);
+
     this.items = spec.contentItems;
 
     this.flatItems = flattenByProp(this.items || [], 'items');

src/services/__tests__/models/Callback.test.ts

@@ -20,7 +20,7 @@ describe('Models', () => {
       );
       expect(callback.name).toEqual('Test.Callback');
       expect(callback.operations.length).toEqual(0);
-      expect(callback.expanded).toBeUndefined();
+      expect(callback.expanded).toBeFalsy();
     });
   });
 });

src/services/models/Callback.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPICallback, Referenced } from '../../types';
 import { isOperationName, JsonPointer } from '../../utils';
@@ -8,7 +8,8 @@ import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 
 export class CallbackModel {
   @observable
-  expanded: boolean;
+  expanded: boolean = false;
+
   name: string;
   operations: OperationModel[] = [];
 
@@ -19,6 +20,8 @@ export class CallbackModel {
     pointer: string,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     this.name = name;
     const paths = parser.deref<OpenAPICallback>(infoOrRef);
     parser.exitRef(infoOrRef);

src/services/models/Field.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import {
   OpenAPIParameter,
@@ -39,7 +39,7 @@ const DEFAULT_SERIALIZATION: Record<
  */
 export class FieldModel {
   @observable
-  expanded: boolean | undefined;
+  expanded: boolean | undefined = false;
 
   schema: SchemaModel;
   name: string;
@@ -61,6 +61,8 @@ export class FieldModel {
     pointer: string,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     const info = parser.deref<OpenAPIParameter>(infoOrRef);
     this.kind = infoOrRef.kind || 'field';
     this.name = infoOrRef.name || info.name;

src/services/models/Group.model.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIExternalDocumentation, OpenAPITag } from '../../types';
 import { safeSlugify } from '../../utils';
@@ -35,6 +35,8 @@ export class GroupModel implements IMenuItem {
     tagOrGroup: OpenAPITag | MarkdownHeading,
     parent?: GroupModel,
   ) {
+    makeObservable(this);
+
     // markdown headings already have ids calculated as they are needed for heading anchors
     this.id = (tagOrGroup as MarkdownHeading).id || type + '/' + safeSlugify(tagOrGroup.name);
     this.type = type;

src/services/models/MediaContent.ts

@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, makeObservable } from 'mobx';
 
 import { OpenAPIMediaType } from '../../types';
 import { MediaTypeModel } from './MediaType';
@@ -26,6 +26,8 @@ export class MediaContentModel {
     public isRequestType: boolean,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     if (options.unstable_ignoreMimeParameters) {
       info = mergeSimilarMediaTypes(info);
     }

src/services/models/Operation.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { IMenuItem } from '../MenuStore';
 import { GroupModel } from './Group.model';
@@ -84,6 +84,8 @@ export class OperationModel implements IMenuItem {
     private options: RedocNormalizedOptions,
     isCallback: boolean = false,
   ) {
+    makeObservable(this);
+
     this.pointer = operationSpec.pointer;
 
     this.description = operationSpec.description;

src/services/models/Response.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIResponse, Referenced } from '../../types';
 
@@ -13,7 +13,7 @@ import { MediaContentModel } from './MediaContent';
 
 export class ResponseModel {
   @observable
-  expanded: boolean;
+  expanded: boolean = false;
 
   content?: MediaContentModel;
   code: string;
@@ -31,6 +31,8 @@ export class ResponseModel {
     infoOrRef: Referenced<OpenAPIResponse>,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     this.expanded = options.expandResponses === 'all' || options.expandResponses[code];
 
     const info = parser.deref(infoOrRef);

src/services/models/Schema.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIExternalDocumentation, OpenAPISchema, Referenced } from '../../types';
 
@@ -72,6 +72,8 @@ export class SchemaModel {
     private options: RedocNormalizedOptions,
     isChild: boolean = false,
   ) {
+    makeObservable(this);
+
     this.pointer = schemaOrRef.$ref || pointer || '';
     this.rawSchema = parser.deref(schemaOrRef);
     this.schema = parser.mergeAllOf(this.rawSchema, this.pointer, isChild);

src/standalone.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { hydrate as hydrateComponent, render } from 'react-dom';
+import { configure } from "mobx"
 
 import { Redoc, RedocStandalone } from './components/';
 import { AppStore, StoreState } from './services/AppStore';
 import { debugTime, debugTimeEnd } from './utils/debug';
 import { querySelector } from './utils/dom';
 
+configure({
+  useProxies: 'ifavailable'
+})
+
 export { Redoc, AppStore } from '.';
 
 export const version = __REDOC_VERSION__;

src/styled-components.ts

@@ -13,10 +13,10 @@ const {
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
 
 export const media = {
-  lessThan(breakpoint, print?: boolean) {
+  lessThan(breakpoint, print?: boolean, extra?: string) {
     return (...args) => css`
       @media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
-          props.theme.breakpoints[breakpoint]}) {
+          props.theme.breakpoints[breakpoint]})${extra || ''} {
         ${(css as any)(...args)};
       }
     `;

src/utils/jsonToHtml.ts

@@ -73,7 +73,7 @@ function valueToHTML(value, maxExpandLevel: number) {
 
 function arrayToHTML(json, maxExpandLevel: number) {
   const collapsed = level > maxExpandLevel ? 'collapsed' : '';
-  let output = `<div class="collapser"></div>${punctuation(
+  let output = `<button class="collapser"></button>${punctuation(
     '[',
   )}<span class="ellipsis"></span><ul class="array collapsible">`;
   let hasContents = false;
@@ -98,7 +98,7 @@ function objectToHTML(json, maxExpandLevel: number) {
   const collapsed = level > maxExpandLevel ? 'collapsed' : '';
   const keys = Object.keys(json);
   const length = keys.length;
-  let output = `<div class="collapser"></div>${punctuation(
+  let output = `<button class="collapser"></button>${punctuation(
     '{',
   )}<span class="ellipsis"></span><ul class="obj collapsible">`;
   let hasContents = false;