chore: v2.5.0 (#2684)

Bumps [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime) from 7.23.2 to 7.27.0.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.27.0/packages/babel-runtime)

---
updated-dependencies:
- dependency-name: "@babel/runtime"
  dependency-version: 7.27.0
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/styles/Rules/HeaderGerunds.yml

@@ -5,3 +5,7 @@ level: error
 scope: heading
 tokens:
   - '^\w*ing.*'
+exceptions:
+  - expandSingleSchemaField
+  - hideLoading
+  - hideSingleRequestSampleTab

.github/sync.yml

@@ -1,6 +0,0 @@
-group:
-  - files:
-      - source: docs/
-        dest: docs/redoc
-    repos: |
-      Redocly/docs

.github/workflows/docs-tests.yaml

@@ -0,0 +1,37 @@
+name: Documentation tests
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  markdownlint:
+    name: markdownlint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: DavidAnson/markdownlint-cli2-action@v15
+        with:
+          config: .markdownlint.yaml
+          globs: |
+            docs/**/*.md
+            README.md
+
+  vale:
+    name: vale action
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: errata-ai/vale-action@reviewdog
+        with:
+          files: '["README.md", "docs"]'
+          filter_mode: file
+
+  linkcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Markup Link Checker (mlc)
+        uses: becheran/mlc@v0.16.1
+        with:
+          args: ./docs

.github/workflows/publish.yml

@@ -2,8 +2,7 @@ name: Publish
 
 on:
   push:
-    tags:
+    branches: [main]
-      - v[0-9]*.[0-9]*.[0-9]*
 
 jobs:
   bundle:
@@ -22,7 +21,7 @@ jobs:
       - run: npm ci
       - run: npm run bundle
       - name: Store bundle artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: bundles
           path: bundles
@@ -40,14 +39,32 @@ jobs:
       - uses: actions/checkout@v3
       - run: npm ci
       - name: Download bundled artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: bundles
           path: bundles
       - run: npm run e2e
+  check-version:
+    name: Check Version
+    runs-on: ubuntu-latest
+    needs: [bundle, unit-tests, e2e-tests]
+    outputs:
+      changed: ${{ steps.check.outputs.changed }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+      - name: Check if version has been updated
+        id: check
+        uses: EndBug/version-check@v2.0.1
+        with:
+          file-url: https://cdn.jsdelivr.net/npm/redoc/package.json
+          static-checking: localIsNew
   publish:
     name: Publish to NPM
-    needs: [bundle, unit-tests, e2e-tests]
+    needs: [check-version]
+    if: needs.check-version.outputs.changed == 'true'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/setup-node@v3
@@ -56,7 +73,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - uses: actions/checkout@v3
       - name: Download bundled artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: bundles
           path: bundles
@@ -77,7 +94,8 @@ jobs:
 
   publish-cdn:
     name: Publish to CDN
-    needs: [bundle, unit-tests, e2e-tests]
+    needs: [check-version]
+    if: needs.check-version.outputs.changed == 'true'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -89,14 +107,15 @@ jobs:
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: us-east-1
       - name: Download all artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
       - name: Publish to S3
         run: npm run publish-cdn
 
   invalidate-cache:
     name: Clear cache
     runs-on: ubuntu-latest
-    needs: [publish, publish-cdn]
+    needs: [check-version, publish, publish-cdn]
+    if: needs.check-version.outputs.changed == 'true'
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

.github/workflows/sync.yml

@@ -1,18 +0,0 @@
-name: Sync Files
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-jobs:
-  sync:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-      - name: Run GitHub File Sync
-        uses: Redocly/repo-file-sync-action@main
-        with:
-          GH_PAT: ${{ secrets.GH_PAT }}
-          COMMIT_PREFIX: 'sync:'
-          SKIP_PR: true

.github/workflows/vale.yaml

@@ -1,16 +0,0 @@
-name: Docs lint
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-jobs:
-  vale:
-    name: vale action
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: errata-ai/vale-action@reviewdog
-        with:
-          files: '["README.md", "docs"]'
-        env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.markdownlint.yaml

@@ -0,0 +1,54 @@
+---
+# Default rules: https://github.com/github/super-linter/blob/master/TEMPLATES/.markdown-lint.yml
+
+# Rules by id
+
+# Unordered list style
+MD004: false
+
+# Unordered list indentation
+MD007:
+  indent: 2
+
+MD013:
+  # TODO: Consider to decrease allowed line length
+  line_length: 800
+  tables: false
+
+## Allow same headers in siblings
+MD024:
+  siblings_only: true
+
+# Multiple top level headings in the same document
+MD025:
+  front_matter_title: ''
+
+# Trailing punctuation in heading
+MD026:
+  punctuation: '.,;:。，；:'
+
+# Ordered list item prefix
+MD029: false
+
+# Unordered lists inside of ordered lists
+MD030: false
+
+# Inline HTML
+MD033: false
+
+# No bare urls
+MD034: false
+
+# Emphasis used instead of a heading
+MD036: false
+
+# Disable "First line in file should be a top level heading"
+# We use uncommon format to add metadata.
+# TODO: Consider to use "YAML front matter".
+MD041: false
+
+# Rules by tags
+blank_lines: false
+
+MD046: false
+# code-block-style

.mlc.toml

@@ -0,0 +1,4 @@
+# Ignore these links, we can't check them from this subproject
+ignore-links=["../*", "/docs/*"]
+# Path to the root folder used to resolve all relative paths
+root-dir="./docs"

CHANGELOG.md

@@ -1,3 +1,113 @@
+# [2.5.0](https://github.com/Redocly/redoc/compare/v2.4.0...v2.5.0) (2025-04-14)
+
+
+### Bug Fixes
+
+* enhance accessibility for menu items with keyboard support ([#2655](https://github.com/Redocly/redoc/issues/2655)) ([2db293b](https://github.com/Redocly/redoc/commit/2db293bfb2973497dd33f31dc99e97f5bb90bbe8))
+
+
+### Features
+
+* add keyboard navigation support to JsonViewer component ([#2654](https://github.com/Redocly/redoc/issues/2654)) ([1b4126f](https://github.com/Redocly/redoc/commit/1b4126fde4531387f49c90f52efbd0c0e5f7b6ea))
+
+
+
+# [2.4.0](https://github.com/Redocly/redoc/compare/v2.3.0...v2.4.0) (2025-02-07)
+
+
+### Bug Fixes
+
+* Prototype Pollution Vulnerability Affecting redoc <=2.2.0 ([#2638](https://github.com/Redocly/redoc/issues/2638)) ([153ec7a](https://github.com/Redocly/redoc/commit/153ec7a0b7245639f404c0b038b612ae7377c7db))
+* unify redoc config ([#2647](https://github.com/Redocly/redoc/issues/2647)) ([53a6afc](https://github.com/Redocly/redoc/commit/53a6afc59624fe4591b0a0f1f20f41c0fbb5f1cf))
+
+
+### Features
+
+* add supporting react 19 in package.json ([#2652](https://github.com/Redocly/redoc/issues/2652)) ([3a74802](https://github.com/Redocly/redoc/commit/3a748022be3a7dc7f98669e1645dd5cda72f1abc))
+
+
+
+# [2.3.0](https://github.com/Redocly/redoc/compare/v2.2.0...v2.3.0) (2025-01-16)
+
+
+### Bug Fixes
+
+* displaying json example when showObjectSchemaExamples enabled ([#2635](https://github.com/Redocly/redoc/issues/2635)) ([59ee73f](https://github.com/Redocly/redoc/commit/59ee73fefa8e8edb398940076bdd721fc284caa3))
+* displaying nested items with type string ([#2634](https://github.com/Redocly/redoc/issues/2634)) ([85b622f](https://github.com/Redocly/redoc/commit/85b622fc581eb96303aeb85056aef36c74ea9f9d))
+* passing inline parameters after support react 18 for response title ([#2640](https://github.com/Redocly/redoc/issues/2640)) ([d614d2d](https://github.com/Redocly/redoc/commit/d614d2d022df8bd1989cb0eaf76d087b52120d36))
+
+
+### Features
+
+* update pattern styling ([#2196](https://github.com/Redocly/redoc/issues/2196)) ([#2600](https://github.com/Redocly/redoc/issues/2600)) ([aa0879c](https://github.com/Redocly/redoc/commit/aa0879ca0235112918428fdff8f4c48d2c6c4adf))
+
+
+
+# [2.2.0](https://github.com/Redocly/redoc/compare/v2.1.5...v2.2.0) (2024-10-16)
+
+
+### Bug Fixes
+
+* show siblings schema with oneOf ([#2576](https://github.com/Redocly/redoc/issues/2576)) ([60d131b](https://github.com/Redocly/redoc/commit/60d131b0a9dab4710e900323c9ba81160cecf7d8))
+
+
+### Features
+
+* add support x-badges ([#2605](https://github.com/Redocly/redoc/issues/2605)) ([64f1877](https://github.com/Redocly/redoc/commit/64f18779e5fe7e03f25862463cbc5062e85c867c))
+
+
+
+## [2.1.5](https://github.com/Redocly/redoc/compare/v2.1.4...v2.1.5) (2024-06-10)
+
+
+### Bug Fixes
+
+* update react to 18 and react-tabs to 6 ([#2547](https://github.com/Redocly/redoc/issues/2547)) ([c664dd0](https://github.com/Redocly/redoc/commit/c664dd0d56571ce799b8eadd081d86a6b2cdefae))
+
+
+
+## [2.1.4](https://github.com/Redocly/redoc/compare/v2.1.3...v2.1.4) (2024-04-25)
+
+
+### Bug Fixes
+
+* add deprecated css to clickable property name ([#2526](https://github.com/Redocly/redoc/issues/2526)) ([b0d03d0](https://github.com/Redocly/redoc/commit/b0d03d02069c1508447ddebc2f8a3fffa9b03ce5))
+* use h2/h3 for headings instead of h1/h2 for better seo ([#2514](https://github.com/Redocly/redoc/issues/2514)) ([2b72dc0](https://github.com/Redocly/redoc/commit/2b72dc0e90f759a8ee2e47691c844e7f05928a24))
+* security vulnerability ([#2445](https://github.com/Redocly/redoc/pull/2445)) ([1f11f5](https://github.com/Redocly/redoc/commit/1f11f597c4f10ddd601db247f5034052b6ca689f))
+
+
+
+## [2.1.3](https://github.com/Redocly/redoc/compare/v2.1.2...v2.1.3) (2023-10-24)
+
+
+### Bug Fixes
+
+* default value as object in request body ([#2437](https://github.com/Redocly/redoc/issues/2437)) ([b36a6e2](https://github.com/Redocly/redoc/commit/b36a6e27bb3e03d39ee74c3e71f18a504539d91b))
+* display string pattern in array items ([#2438](https://github.com/Redocly/redoc/issues/2438)) ([8ddeb6d](https://github.com/Redocly/redoc/commit/8ddeb6dfda686ec8a6948eb2d96efb99bf422429))
+* hideRequestPayloadSample ([#2436](https://github.com/Redocly/redoc/issues/2436)) ([bf96061](https://github.com/Redocly/redoc/commit/bf960612a47bfe10ff205b9d78f3040515a5467d))
+* more cases for react18 and cli integration ([#2416](https://github.com/Redocly/redoc/issues/2416)) ([26674e7](https://github.com/Redocly/redoc/commit/26674e70c66b686d0f0baa569b186292c41e5726))
+
+
+
+## [2.1.2](https://github.com/Redocly/redoc/compare/v2.1.1...v2.1.2) (2023-09-11)
+
+
+### Bug Fixes
+
+* react18 cli integration ([#2404](https://github.com/Redocly/redoc/issues/2404)) ([76edc15](https://github.com/Redocly/redoc/commit/76edc159399150778b384be87ee958a93e5c491c))
+* style RefreshToken URL as <code> in the authorization section ([1d61001](https://github.com/Redocly/redoc/commit/1d6100111a0f3b609dadbd706354ce6125947df2))
+
+
+
+## [2.1.1](https://github.com/Redocly/redoc/compare/v2.1.0...v2.1.1) (2023-08-17)
+
+
+### Bug Fixes
+
+* hotfix, crash after 2.1 release ([0ab3428](https://github.com/Redocly/redoc/commit/0ab3428664f857ea07381686a2b4beb4c22b17c3))
+
+
+
 # [2.1.0](https://github.com/Redocly/redoc/compare/v2.0.0...v2.1.0) (2023-08-10)
 
 

README.md

@@ -1,19 +1,17 @@
 <div align="center">
   <img alt="Redoc logo" src="https://raw.githubusercontent.com/Redocly/redoc/main//docs/images/redoc.png" width="400px" />
 
-  # Generate interactive API documentation from OpenAPI definitions
+# Generate beautiful API documentation from OpenAPI
 
-  [![Coverage Status](https://coveralls.io/repos/Redocly/redoc/badge.svg?branch=main&service=github)](https://coveralls.io/github/Redocly/redoc?branch=main) [![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Redocly/redoc/blob/main/LICENSE)
+  [![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Redocly/redoc/blob/main/LICENSE)
 
-  [![bundle size](http://img.badgesize.io/https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js?compression=gzip&max=300000)](https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js) [![npm](https://img.shields.io/npm/dm/redoc.svg)](https://www.npmjs.com/package/redoc) [![](https://data.jsdelivr.com/v1/package/npm/redoc/badge)](https://www.jsdelivr.com/package/npm/redoc) [![Docker Build Status](https://img.shields.io/docker/build/redocly/redoc.svg)](https://hub.docker.com/r/redocly/redoc/)
+  [![bundle size](http://img.badgesize.io/https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js?compression=gzip&max=300000)](https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js) [![npm](https://img.shields.io/npm/dm/redoc.svg)](https://www.npmjs.com/package/redoc) [![jsDelivr status](https://data.jsdelivr.com/v1/package/npm/redoc/badge)](https://www.jsdelivr.com/package/npm/redoc)
 </div>
 
-**This is the README for the `2.x` version of Redoc (React-based).**
-**The README for the `1.x` version is on the [v1.x](https://github.com/Redocly/redoc/tree/v1.x) branch.**
 
 ## About Redoc
 
-Redoc is an open-source tool for generating documentation from OpenAPI (fka Swagger) definitions.
+Redoc is an open source tool for generating documentation from OpenAPI (formerly Swagger) definitions.
 
 By default Redoc offers a three-panel, responsive layout:
 
@@ -32,77 +30,107 @@ A version of the Swagger Petstore API is displayed by default.
 To test it with your own OpenAPI definition,
 enter the URL for your definition and select **TRY IT**.
 
-## Redoc vs. Reference vs. Portals
+## Redoc features
+
+- Responsive three-panel design with menu/scrolling synchronization
+- Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0
+- Ability to integrate your API introduction into the side menu
+- High-level grouping in side menu with the [`x-tagGroups`](https://redocly.com/docs/api-reference-docs/specification-extensions/x-tag-groups/) specification extension
+- [Simple integration with `create-react-app`](https://redocly.com/docs/redoc/quickstart/react/)
+- Code samples support (with vendor extension) <br>
+  ![code samples in action](docs/images/code-samples-demo.gif)
+
+## Usage
+
+Redoc is provided as a CLI tool (also distributed as a Docker image), HTML tag, and React component.
+
+### Generate documentation from the CLI
+
+If you have Node installed, quickly generate documentation using `npx`:
+
+```bash
+npx @redocly/cli build-docs openapi.yaml
+```
+
+The tool outputs by default to a file named `redoc-static.html` that you can open in your browser.
+
+> [Redocly CLI](https://github.com/Redocly/redocly-cli/) does more than docs; check it out and add linting, bundling, and more to your API workflow.
+
+### Add an HTML element to the page
+
+Create an HTML page, or edit an existing one, and add the following within the body tags:
+
+```html
+    <redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
+```
+
+Open the HTML file in your browser, and your API documentation is shown on the page.
+
+Add your own `spec-url` to the `<redoc>` tag; this attribute can also be a local file. The JavaScript library can also be installed locally using `npm` and served from your own server, see the [HTML deployment documentation](https://redocly.com/docs/redoc/deployment/html/) for more details.
+
+### More usage options
+
+Check out the [deployment documentation](./docs/deployment/intro.md) for more options, and detailed documentation for each.
+
+## Redoc vs. Redocly API Reference
 
 Redoc is Redocly's community-edition product. Looking for something more?
-Checkout the following feature comparison of Redocly's premium products versus Redoc:
+We also offer [hosted API reference documentation](https://redocly.com/docs/api-registry/guides/api-registry-quickstart/)
+with additional features including:
 
-| Features                     | Redoc     | Reference | Portals     |
+* Try-it console
-|------------------------------|:---------:|:---------:|:-----------:|
+* Automated code samples
-| **Specs**                    |           |           |             |
+* Pagination
-| Swagger 2.0                  | √         | √         | √           |
+* Extra theme options
-| OpenAPI 3.0                  | √         | √         | √           |
-| OpenAPI 3.1                  | √ (basic) | √         | √           |
-|                              |           |           |             |
-| **Theming**                  |           |           |             |
-| Fonts/colors                 | √         | √         | √           |
-| Extra theme options          |           | √         | √           |
-|                              |           |           |             |
-| **Performance**              |           |           |             |
-| Pagination                   |           | √         | √           |
-| Search (enhanced)            |           | √         | √           |
-| Search (server-side)         |           |           | √           |
-|                              |           |           |             |
-| **Multiple APIs**            |           |           |             |
-| Multiple versions            |           | √         | √           |
-| Multiple APIs                |           |           | √           |
-| API catalog                  |           |           | √           |
-|                              |           |           |             |
-| **Additional features**      |           |           |             |
-| Try-it console               |           | √         | √           |
-| Automated code samples       |           | √         | √           |
-| Deep links                   |           | √         | √           |
-| More SEO control             |           |           | √           |
-| Contextual docs              |           |           | √           |
-| Landing pages                |           |           | √           |
-| React hooks for more control |           |           | √           |
-| Personalization              |           |           | √           |
-| Analytics integrations       |           |           | √           |
-| Feedback                     |           |           | Coming Soon |
 
-Refer to the Redocly's documentation for more information on these products:
+### Documentation and resources
 
-- [Portals](https://redocly.com/docs/developer-portal/introduction/)
+- [Reference docs](https://redocly.com/docs/api-reference-docs/getting-started/) - we take care of the hosting
-- [Reference](https://redocly.com/docs/api-reference-docs/getting-started/)
+- [Redoc](https://redocly.com/docs/redoc/) - detailed documentation for this open source project (also in the `docs/` folder)
-- [Redoc](https://redocly.com/docs/redoc/quickstart/intro/)
+- [Command-line interface to bundle your docs into a web-ready HTML file](https://redocly.com/docs/cli/commands/build-docs/)
+- API linting, bundling, and much more with open source [Redocly CLI](https://redocly.com/docs/cli)
 
-## Features
+## Showcase
-- Responsive three-panel design with menu/scrolling synchronization
-- [Multiple deployment options](https://redocly.com/docs/redoc/quickstart/intro/)
-- [Server-side rendering (SSR) ready](https://redocly.com/docs/redoc/quickstart/cli/#redoc-cli-commands)
-- Ability to integrate your API introduction into the side menu
-- [Simple integration with `create-react-app`](https://redocly.com/docs/redoc/quickstart/react/)
 
-  [Example repo](https://github.com/APIs-guru/create-react-app-redoc)
+A sample of the organizations using Redocly tools in the wild:
-- [Command-line interface to bundle your docs into a **zero-dependency** HTML file](https://redocly.com/docs/cli/commands/build-docs/)
-- Neat **interactive** documentation for nested objects <br>
-  ![](docs/images/nested-demo.gif)
 
-## Customization options
+- [Rebilly](https://api-reference.rebilly.com/)
-[<img alt="Customization services" src="http://i.imgur.com/c4sUF7M.png" height="60px">](https://redocly.com/#services)
+- [Docker Engine](https://docs.docker.com/engine/api/v1.25/)
-- High-level grouping in side-menu with the [`x-tagGroups`](https://redocly.com/docs/api-reference-docs/specification-extensions/x-tag-groups/) specification extension
+- [Zuora](https://www.zuora.com/developer/api-reference/)
-- Branding/customizations using the [`theme` option](https://redocly.com/docs/api-reference-docs/configuration/theming/)
+- [Discourse](http://docs.discourse.org)
+- [Commbox](https://www.commbox.io/api/)
+- [APIs.guru](https://apis.guru/api-doc/)
+- [BoxKnight](https://www.docs.boxknight.com/)
+- [Quaderno API](https://developers.quaderno.io/api)
 
-## Support
+_Pull requests to add your own API page to the list are welcome_
-- OpenAPI v3.0 support
+
-- Basic OpenAPI v3.1 support
+## Configuration
-- Broad OpenAPI v2.0 feature support (yes, it supports even `discriminator`) <br>
+
-  ![](docs/images/discriminator-demo.gif)
+Redoc is highly configurable, see the [configuration documentation](docs/config.md) for details.
-- Code samples support (via vendor extension) <br>
+
-  ![](docs/images/code-samples-demo.gif)
+### OpenAPI specification extensions
+Redoc uses the following [specification extensions](https://redocly.com/docs/api-reference-docs/spec-extensions/):
+
+* [`x-logo`](docs/redoc-vendor-extensions.md#x-logo) - is used to specify API logo
+* [`x-traitTag`](docs/redoc-vendor-extensions.md#x-traitTag) - useful for tags that refer to non-navigation properties like Pagination, Rate-Limits, etc
+* [`x-codeSamples`](docs/redoc-vendor-extensions.md#x-codeSamples) - specify operation code samples
+* [`x-badges`](docs/redoc-vendor-extensions.md#x-badges) - specify operation badges
+* [`x-examples`](docs/redoc-vendor-extensions.md#x-examples) - specify JSON example for requests
+* [`x-nullable`](docs/redoc-vendor-extensions.md#x-nullable) - mark schema param as a nullable
+* [`x-displayName`](docs/redoc-vendor-extensions.md#x-displayname) - specify human-friendly names for the menu categories
+* [`x-tagGroups`](docs/redoc-vendor-extensions.md#x-tagGroups) - group tags by categories in the side menu
+* [`x-servers`](docs/redoc-vendor-extensions.md#x-servers) - ability to specify different servers for API (backported from OpenAPI 3.0)
+* [`x-additionalPropertiesName`](docs/redoc-vendor-extensions.md#x-additionalPropertiesName) - ability to supply a descriptive name for the additional property keys
+* [`x-summary`](docs/redoc-vendor-extensions.md#x-summary) - for Response object, use as the response button text, with description rendered under the button
+* [`x-explicitMappingOnly`](docs/redoc-vendor-extensions.md#x-explicitMappingOnly) - in Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object
 
 ## Releases
-**Important:** all the 2.x releases are deployed to npm and can be used with Redocly-cdn:
+
+**The README for the `1.x` version is on the [v1.x](https://github.com/Redocly/redoc/tree/v1.x) branch.**
+
+All the 2.x releases are deployed to npm and can be used with Redocly-cdn:
 - particular release, for example, `v2.0.0`: https://cdn.redoc.ly/redoc/v2.0.0/bundles/redoc.standalone.js
 - `latest` release: https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js
 
@@ -111,214 +139,6 @@ Additionally, all the 1.x releases are hosted on our GitHub Pages-based CDN **(d
 - `v1.x.x` release: https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js
 - `latest` release: https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js - points to latest 1.x.x release since 2.x releases are not hosted on this CDN but on unpkg.
 
-## Version Guidance
-| Redoc Release | OpenAPI Specification |
-|:--------------|:----------------------|
-| 2.0.0-alpha.54| 3.1, 3.0.x, 2.0       |
-| 2.0.0-alpha.x | 3.0, 2.0              |
-| 1.19.x        | 2.0                   |
-| 1.18.x        | 2.0                   |
-| 1.17.x        | 2.0                   |
 
-## Showcase
-- [Rebilly](https://api-reference.rebilly.com/)
-- [Docker Engine](https://docs.docker.com/engine/api/v1.25/)
-- [Zuora](https://www.zuora.com/developer/api-reference/)
-- [Discourse](http://docs.discourse.org)
-- [Commbox](https://www.commbox.io/api/)
-- [APIs.guru](https://apis.guru/api-doc/)
-- [BoxKnight](https://www.docs.boxknight.com/)
-
-## Lint OpenAPI definitions
-
-Redocly CLI is an [open source command-line tool](https://github.com/Redocly/redocly-cli) that you can use to lint
-your OpenAPI definition. Linting helps you to catch errors and inconsistencies in your
-OpenAPI definition before publishing.
-
-Learn more about [API standards and linting](https://redocly.com/docs/cli/api-standards/) in the main Redocly documentation.
-
-## Deployment
-
-### TL;DR final code example
-
-To render your OpenAPI definition using Redoc, use the following HTML code sample and
-replace the `spec-url` attribute with the url or local file address to your definition.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Redoc</title>
-    <!-- needed for adaptive design -->
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
-
-    <!--
-    Redoc doesn't change outer page styles
-    -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
-    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
-  </body>
-</html>
-
-```
-
-For step-by-step instructions for how to get started using Redoc
-to render your OpenAPI definition, refer to the
-[**Redoc quickstart guide**](https://redocly.com/docs/redoc/quickstart/) and [**How to use the HTML element**](https://redocly.com/docs/redoc/deployment/html/).
-
-
-## Configuration
-
-### Security Definition location
-You can inject the Security Definitions widget into any place in your definition `description`.
-For more information, refer to [Security definitions injection](docs/security-definitions-injection.md).
-
-### OpenAPI specification extensions
-Redoc uses the following [specification extensions](https://redocly.com/docs/api-reference-docs/spec-extensions/):
-* [`x-logo`](docs/redoc-vendor-extensions.md#x-logo) - is used to specify API logo
-* [`x-traitTag`](docs/redoc-vendor-extensions.md#x-traitTag) - useful for handling out common things like Pagination, Rate-Limits, etc
-* [`x-codeSamples`](docs/redoc-vendor-extensions.md#x-codeSamples) - specify operation code samples
-* [`x-examples`](docs/redoc-vendor-extensions.md#x-examples) - specify JSON example for requests
-* [`x-nullable`](docs/redoc-vendor-extensions.md#x-nullable) - mark schema param as a nullable
-* [`x-displayName`](docs/redoc-vendor-extensions.md#x-displayname) - specify human-friendly names for the menu categories
-* [`x-tagGroups`](docs/redoc-vendor-extensions.md#x-tagGroups) - group tags by categories in the side menu
-* [`x-servers`](docs/redoc-vendor-extensions.md#x-servers) - ability to specify different servers for API (backported from OpenAPI 3.0)
-* [`x-ignoredHeaderParameters`](docs/redoc-vendor-extensions.md#x-ignoredHeaderParameters) - ability to specify header parameter names to ignore
-* [`x-additionalPropertiesName`](docs/redoc-vendor-extensions.md#x-additionalPropertiesName) - ability to supply a descriptive name for the additional property keys
-* [`x-summary`](docs/redoc-vendor-extensions.md#x-summary) - For Response object, use as the response button text, with description rendered under the button
-* [`x-extendedDiscriminator`](docs/redoc-vendor-extensions.md#x-extendedDiscriminator) - In Schemas, uses this to solve name-clash issues with the standard discriminator
-* [`x-explicitMappingOnly`](docs/redoc-vendor-extensions.md#x-explicitMappingOnly) - In Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object
-
-### `<redoc>` options object
-You can use all of the following options with the standalone version of the <redoc> tag by kebab-casing them. For example, `scrollYOffset` becomes `scroll-y-offset`, and `expandResponses` becomes `expand-responses`.
-
-* `disableSearch` - disable search indexing and search box.
-* `minCharacterLengthToInitSearch` - set minimal characters length to init search, default `3`, minimal `1`.
-* `expandDefaultServerVariables` - enable expanding default server variables, default `false`.
-* `expandResponses` - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. `expandResponses="200,201"`. Special value `"all"` expands all responses by default. Be careful: this option can slow-down documentation rendering time.
-* `generatedPayloadSamplesMaxDepth` - set the maximum render depth for JSON payload samples (responses and request body). The default value is `10`.
-* `maxDisplayedEnumValues` - display only specified number of enum values. hide rest values under spoiler.
-* `hideDownloadButton` - do not show "Download" spec button. **THIS DOESN'T MAKE YOUR SPEC PRIVATE**, it just hides the button.
-* `downloadFileName` - set a custom file name for the downloaded API definition file.
-* `downloadDefinitionUrl` - If the 'Download' button is visible in the API reference documentation (hideDownloadButton=false), the URL configured here opens when that button is selected. Provide it as an absolute URL with the full URI scheme.
-* `hideHostname` - if set, the protocol and hostname is not shown in the operation definition.
-* `hideLoading` - do not show loading animation. Useful for small docs.
-* `hideFab` - do not show FAB in mobile view. Useful for implementing a custom floating action button.
-* `hideSchemaPattern` - if set, the pattern is not shown in the schema.
-* `hideSingleRequestSampleTab` - do not show the request sample tab for requests with only one sample.
-* `showObjectSchemaExamples` - show object schema example in the properties, default `false`.
-* `expandSingleSchemaField` - automatically expand single field in a schema
-* `schemaExpansionLevel` - specifies whether to automatically expand schemas. Special value `"all"` expands all levels. The default value is `0`.
-* `jsonSampleExpandLevel` - set the default expand level for JSON payload samples (responses and request body). Special value `"all"` expands all levels. The default value is `2`.
-* `hideSchemaTitles` - do not display schema `title` next to to the type
-* `simpleOneOfTypeLabel` - show only unique oneOf types in the label without titles
-* `sortEnumValuesAlphabetically` - set to true, sorts all enum values in all schemas alphabetically
-* `sortOperationsAlphabetically` - set to true, sorts operations in the navigation sidebar and in the middle panel alphabetically
-* `sortTagsAlphabetically` - set to true, sorts tags in the navigation sidebar and in the middle panel alphabetically
-* `menuToggle` - if true, clicking second time on expanded menu item collapses it, default `true`.
-* `nativeScrollbars` - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs).
-* `onlyRequiredInSamples` - shows only required fields in request samples.
-* `pathInMiddlePanel` - show path link and HTTP verb in the middle panel instead of the right one.
-* `requiredPropsFirst` - show required properties first ordered in the same order as in `required` array.
-* `scrollYOffset` - If set, specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc;
-`scrollYOffset` can be specified in various ways:
-  * **number**: A fixed number of pixels to be used as offset.
-  * **selector**: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom is used as offset.
-  * **function**: A getter function. Must return a number representing the offset (in pixels).
-* `showExtensions` - show vendor extensions ("x-" fields). Extensions used by Redoc are ignored. Can be boolean or an array of `string` with names of extensions to display.
-* `sortPropsAlphabetically` - sort properties alphabetically.
-* `payloadSampleIdx` - if set, payload sample is inserted at this index or last. Indexes start from 0.
-* `theme` - Redoc theme. For details check [theme docs](#redoc-theme-object).
-* `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
-* `nonce` - if set, the provided value is injected in every injected HTML element in the `nonce` attribute. Useful when using CSP, see https://webpack.js.org/guides/csp/.
-* `sideNavStyle` - can be specified in various ways:
-  * **summary-only**: displays a summary in the sidebar navigation item. (**default**)
-  * **path-only**: displays a path in the sidebar navigation item.
-  * **id-only**: displays the operation id with a fallback to the path in the sidebar navigation item.
-* `showWebhookVerb` - when set to `true`, shows the HTTP request method for webhooks in operations and in the sidebar.
-
-### `<redoc>` theme object
-* `spacing`
-  * `unit`: 5 # main spacing unit used in autocomputed theme values later
-  * `sectionHorizontal`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
-  * `sectionVertical`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
-* `breakpoints` # breakpoints for switching three/two and mobile view layouts
-  * `small`: '50rem'
-  * `medium`: '85rem'
-  * `large`: '105rem'
-* `colors`
-  * `tonalOffset`: 0.3 # default tonal offset used in computations
-* `typography`
-  * `fontSize`: '14px'
-  * `lineHeight`: '1.5em'
-  * `fontWeightRegular`: '400'
-  * `fontWeightBold`: '600'
-  * `fontWeightLight`: '300'
-  * `fontFamily`: 'Roboto, sans-serif'
-  * `smoothing`: 'antialiased'
-  * `optimizeSpeed`: true
-  * `headings`
-    * `fontFamily`: 'Montserrat, sans-serif'
-    * `fontWeight`: '400'
-    * `lineHeight`: '1.6em'
-  * `code` # inline code styling
-    * `fontSize`: '13px'
-    * `fontFamily`: 'Courier, monospace'
-    * `lineHeight`: # COMPUTED: typography.lineHeight
-    * `fontWeight`: # COMPUTED: typography.fontWeightRegular
-    * `color`: '#e53935'
-    * `backgroundColor`: 'rgba(38, 50, 56, 0.05)'
-    * `wrap`: false # whether to break word for inline blocks (otherwise they can overflow)
-  * `links`
-    * `color`: # COMPUTED: colors.primary.main
-    * `visited`: # COMPUTED: typography.links.color
-    * `hover`: # COMPUTED: lighten(0.2 typography.links.color)
-    * `textDecoration`: 'auto'
-    * `hoverTextDecoration`: 'auto'
-* `sidebar`
-  * `width`: '260px'
-  * `backgroundColor`: '#fafafa'
-  * `textColor`: '#333333'
-  * `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
-  * `groupItems` # Group headings
-    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
-    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
-    * `textTransform`: 'uppercase'
-  * `level1Items` # Level 1 items like tags or section 1st level items
-    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
-    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
-    * `textTransform`: 'none'
-  * `arrow` # sidebar arrow
-    * `size`: '1.5em'
-    * `color`: # COMPUTED: theme.sidebar.textColor
-* `logo`
-  * `maxHeight`: # COMPUTED: sidebar.width
-  * `maxWidth`: # COMPUTED: sidebar.width
-  * `gutter`: '2px' # logo image padding
-* `rightPanel`
-  * `backgroundColor`: '#263238'
-  * `width`: '40%'
-  * `textColor`: '#ffffff'
-  * `servers`
-    * `overlay`
-      * `backgroundColor`: '#fafafa'
-      * `textColor`: '#263238'
-    * `url`
-      * `backgroundColor`: '#fff'
-* `fab`
-  * `backgroundColor`: '#263238'
-  * `color`: '#ffffff'
-
------------
 ## Development
 see [CONTRIBUTING.md](.github/CONTRIBUTING.md)

config/docker/Dockerfile

@@ -5,7 +5,7 @@
 # npm i -g http-server
 # http-server -p 8000 --cors
 
-FROM node:12-alpine
+FROM node:18-alpine
 
 RUN apk update && apk add --no-cache git
 
@@ -13,6 +13,7 @@ RUN apk update && apk add --no-cache git
 WORKDIR /build
 COPY package.json package-lock.json /build/
 RUN npm ci --no-optional --ignore-scripts
+RUN npm explore esbuild -- npm run postinstall
 
 # copy only required for the build files
 COPY src /build/src

demo/ComboBox.tsx

@@ -6,8 +6,8 @@
 import * as React from 'react';
 import styled from '../src/styled-components';
 
-const DropDownItem = styled.li<{ active?: boolean }>`
+const DropDownItem = styled.li<{ $active?: boolean }>`
-  ${(props: any) => (props.active ? 'background-color: #eee' : '')};
+  ${(props: any) => (props.$active ? 'background-color: #eee' : '')};
   padding: 13px 16px;
   &:hover {
     background-color: #eee;
@@ -183,7 +183,7 @@ export default class ComboBox extends React.Component<ComboBoxProps, ComboBoxSta
   renderOption = (option: { value: string; label: string }, idx: number) => {
     return (
       <DropDownItem
-        active={idx === this.state.activeItemIdx}
+        $active={idx === this.state.activeItemIdx}
         key={option.value}
         // tslint:disable-next-line
         onMouseDown={() => {

demo/index.html

@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <meta charset="UTF-8" />
-  <title>ReDoc Interactive Demo</title>
+    <title>Redoc Interactive Demo</title>
-  <meta name="description" content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation" />
+    <meta
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+      name="description"
+      content="Redoc Interactive Demo. OpenAPI-generated API Reference Documentation"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <meta property="og:title" content="ReDoc Interactive Demo">
+    <meta property="og:title" content="Redoc Interactive Demo" />
-  <meta property="og:description" content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation">
+    <meta
-  <meta property="og:image" content="https://user-images.githubusercontent.com/3975738/37729752-8a9ea38a-2d46-11e8-8438-42ed26bf1751.png">
+      property="og:description"
-  <meta name="twitter:card" content="summary_large_image">
+      content="Redoc Interactive Demo. OpenAPI-generated API Reference Documentation"
+    />
+    <meta
+      property="og:image"
+      content="https://user-images.githubusercontent.com/3975738/37729752-8a9ea38a-2d46-11e8-8438-42ed26bf1751.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
 
     <style>
       body {
@@ -22,7 +30,10 @@
         display: block;
       }
     </style>
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
@@ -30,10 +41,17 @@
 
     <script>
       (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+        i['GoogleAnalyticsObject'] = r;
-        (i[r].q = i[r].q || []).push(arguments)
+        (i[r] =
-      }, i[r].l = 1 * new Date(); a = s.createElement(o),
+          i[r] ||
-        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+          function () {
+            (i[r].q = i[r].q || []).push(arguments);
+          }),
+          (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
       })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
       if (window.location.host === 'rebilly.github.io') {
@@ -42,5 +60,4 @@
       }
     </script>
   </body>
-
 </html>

demo/index.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import styled from 'styled-components';
 import { RedocStandalone } from '../src';
 import ComboBox from './ComboBox';
 import FileInput from './components/FileInput';
 
-const DEFAULT_SPEC = 'openapi.yaml';
+const DEFAULT_SPEC = 'museum.yaml';
-const NEW_VERSION_SPEC = 'openapi-3-1.yaml';
+const NEW_VERSION_PETSTORE = 'openapi-3-1.yaml';
 
 const demos = [
-  { value: NEW_VERSION_SPEC, label: 'Petstore OpenAPI 3.1' },
+  { value: DEFAULT_SPEC, label: 'Museum API' },
+  { value: NEW_VERSION_PETSTORE, label: 'Petstore OpenAPI 3.1' },
   { value: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', label: 'Instagram' },
   {
     value: 'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/openapi.yaml',
@@ -54,7 +55,7 @@ class DemoApp extends React.Component<
   };
 
   handleChange = (url: string) => {
-    if (url === NEW_VERSION_SPEC) {
+    if (url === NEW_VERSION_PETSTORE) {
       this.setState({ cors: false });
       0;
     }
@@ -121,7 +122,7 @@ class DemoApp extends React.Component<
         <RedocStandalone
           spec={this.state.spec}
           specUrl={proxiedUrl}
-          options={{ scrollYOffset: 'nav', untrustedSpec: true }}
+          options={{ scrollYOffset: 'nav', sanitize: true }}
         />
       </>
     );
@@ -178,7 +179,9 @@ const Logo = styled.img`
   }
 `;
 
-render(<DemoApp />, document.getElementById('container'));
+const container = document.getElementById('container');
+const root = createRoot(container!);
+root.render(<DemoApp />);
 
 /* ====== Helpers ====== */
 function updateQueryStringParameter(uri, key, value) {

demo/museum.yaml

@@ -0,0 +1,787 @@
+openapi: 3.1.0
+info:
+  title: Redocly Museum API
+  description: An imaginary, but delightful Museum API for interacting with museum services and information. Built with love by Redocly.
+  version: 1.0.0
+  contact:
+    email: team@redocly.com
+    url: 'https://redocly.com/docs/cli/'
+  x-logo:
+    url: 'https://redocly.github.io/redoc/museum-logo.png'
+    altText: Museum logo
+  license:
+    name: MIT
+    url: 'https://opensource.org/license/mit/ '
+servers:
+  - url: 'https://api.fake-museum-example.com/v1'
+paths:
+  /museum-hours:
+    get:
+      summary: Get museum hours
+      description: Get upcoming museum operating hours
+      operationId: getMuseumHours
+      tags:
+        - Operations
+      x-badges:
+        - name: 'Beta'
+          position: before
+          color: purple
+      parameters:
+        - $ref: '#/components/parameters/StartDate'
+        - $ref: '#/components/parameters/PaginationPage'
+        - $ref: '#/components/parameters/PaginationLimit'
+      responses:
+        '200':
+          description: Success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/GetMuseumHoursResponse'
+              examples:
+                default:
+                  summary: Museum opening hours
+                  value:
+                    - date: '2023-09-11'
+                      timeOpen: '09:00'
+                      timeClose: '18:00'
+                    - date: '2023-09-12'
+                      timeOpen: '09:00'
+                      timeClose: '18:00'
+                    - date: '2023-09-13'
+                      timeOpen: '09:00'
+                      timeClose: '18:00'
+                    - date: '2023-09-17'
+                      timeOpen: '09:00'
+                      timeClose: '18:00'
+                closed:
+                  summary: The museum is closed
+                  value: []
+
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+  /special-events:
+    post:
+      security: []
+      operationId: CreateSpecialEvent
+      summary: Create special event
+      tags:
+        - Events
+      x-badges:
+        - name: 'Alpha'
+          color: purple
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CreateSpecialEventRequest'
+            examples:
+              default_example:
+                $ref: '#/components/examples/CreateSpecialEventRequestExample'
+      responses:
+        '200':
+          description: success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SpecialEventResponse'
+              examples:
+                default_example:
+                  $ref: '#/components/examples/CreateSpecialEventResponseExample'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+    get:
+      summary: List special events
+      description: Return a list of upcoming special events at the museum.
+      security: []
+      operationId: listSpecialEvents
+      x-badges:
+        - name: 'Gamma'
+      tags:
+        - Events
+      parameters:
+        - name: startDate
+          in: query
+          description: The starting date to retrieve future operating hours from. Defaults to today's date.
+          schema:
+            type: string
+            format: date
+            example: 2023-02-23
+        - name: endDate
+          in: query
+          description: The end of a date range to retrieve special events for. Defaults to 7 days after `startDate`.
+          schema:
+            type: string
+            format: date
+            example: 2023-04-18
+        - name: page
+          in: query
+          description: The page number to retrieve.
+          schema:
+            type: integer
+            default: 1
+            example: 2
+        - name: limit
+          in: query
+          description: The number of days per page.
+          schema:
+            type: integer
+            default: 10
+            maximum: 30
+            example: 15
+
+      responses:
+        '200':
+          description: Success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ListSpecialEventsResponse'
+              examples:
+                default_example:
+                  $ref: '#/components/examples/ListSpecialEventsResponseExample'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+  /special-events/{eventId}:
+    get:
+      summary: Get special event
+      description: Get details about a special event.
+      operationId: getSpecialEvent
+      tags:
+        - Events
+      parameters:
+        - $ref: '#/components/parameters/EventId'
+      responses:
+        '200':
+          description: Success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SpecialEventResponse'
+              examples:
+                default_example:
+                  $ref: '#/components/examples/GetSpecialEventResponseExample'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+    patch:
+      summary: Update special event
+      description: Update the details of a special event
+      operationId: updateSpecialEvent
+      tags:
+        - Events
+      parameters:
+        - $ref: '#/components/parameters/EventId'
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/UpdateSpecialEventRequest'
+            examples:
+              default_example:
+                $ref: '#/components/examples/UpdateSpecialEventRequestExample'
+      responses:
+        '200':
+          description: Success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SpecialEventResponse'
+              examples:
+                default_example:
+                  $ref: '#/components/examples/UpdateSpecialEventResponseExample'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+    delete:
+      summary: Delete special event
+      description: Delete a special event from the collection. Allows museum to cancel planned events.
+      operationId: deleteSpecialEvent
+      tags:
+        - Events
+      parameters:
+        - $ref: '#/components/parameters/EventId'
+      responses:
+        '204':
+          description: Success - no content
+        '400':
+          description: Bad request
+        '401':
+          description: Unauthorized
+        '404':
+          description: Not found
+  /tickets:
+    post:
+      summary: Buy museum tickets
+      description: Purchase museum tickets for general entry or special events.
+      operationId: buyMuseumTickets
+      tags:
+        - Tickets
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/BuyMuseumTicketsRequest'
+            examples:
+              general_entry:
+                $ref: '#/components/examples/BuyGeneralTicketsRequestExample'
+              event_entry:
+                $ref: '#/components/examples/BuyEventTicketsRequestExample'
+      responses:
+        '200':
+          description: Success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/BuyMuseumTicketsResponse'
+              examples:
+                general_entry:
+                  $ref: '#/components/examples/BuyGeneralTicketsResponseExample'
+                event_entry:
+                  $ref: '#/components/examples/BuyEventTicketsResponseExample'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+  /tickets/{ticketId}/qr:
+    get:
+      summary: Get ticket QR code
+      description: Return an image of your ticket with scannable QR code. Used for event entry.
+      operationId: getTicketCode
+      tags:
+        - Tickets
+      parameters:
+        - $ref: '#/components/parameters/TicketId'
+      responses:
+        '200':
+          description: Scannable event ticket in image format
+          content:
+            image/png:
+              schema:
+                $ref: '#/components/schemas/GetTicketCodeResponse'
+        '400':
+          description: Bad request
+        '404':
+          description: Not found
+components:
+  schemas:
+    SpecialEvent:
+      description: Request payload for creating new special events at the museum.
+      properties:
+        name:
+          description: Name of the special event
+          type: string
+          example: Fossil lecture
+        location:
+          description: Location where the special event is held
+          type: string
+          example: Lecture theatre
+        eventDescription:
+          description: Description of the special event
+          type: string
+          example: Our panel of experts will share their favorite fossils and explain why they are so great.
+        dates:
+          description: List of planned dates for the special event
+          type: array
+          items:
+            type: string
+            format: date
+            example: 2024-03-29
+        price:
+          description: Price of a ticket for the special event
+          type: number
+          format: float
+          example: 12.50
+
+    TicketType:
+      description: Type of ticket being purchased. Use `general` for regular museum entry and `event` for tickets to special events.
+      type: string
+      enum:
+        - event
+        - general
+      x-enumDescriptions:
+        event: Special event ticket
+        general: General museum entry ticket
+      example: event
+    Date:
+      type: string
+      format: date
+      example: 2023-10-29
+    Email:
+      description: Email address for ticket purchaser.
+      type: string
+      format: email
+      example: museum-lover@example.com
+    Phone:
+      description: Phone number for the ticket purchaser (optional).
+      type: string
+      example: +1(234)-567-8910
+    BuyMuseumTicketsRequest:
+      description: Request payload used for purchasing museum tickets.
+      type: object
+      properties:
+        ticketType:
+          $ref: '#/components/schemas/TicketType'
+        eventId:
+          description: Unique identifier for a special event. Required if purchasing tickets for the museum's special events.
+          $ref: '#/components/schemas/EventId'
+        ticketDate:
+          description: Date that the ticket is valid for.
+          $ref: '#/components/schemas/Date'
+        email:
+          $ref: '#/components/schemas/Email'
+        phone:
+          $ref: '#/components/schemas/Phone'
+      required:
+        - ticketType
+        - ticketDate
+        - email
+    TicketMessage:
+      description: Confirmation message after a ticket purchase.
+      type: string
+      example: Museum general entry ticket purchased
+    TicketId:
+      description: Unique identifier for museum ticket. Generated when purchased.
+      type: string
+      format: uuid
+      example: a54a57ca-36f8-421b-a6b4-2e8f26858a4c
+    TicketConfirmation:
+      description: Unique confirmation code used to verify ticket purchase.
+      type: string
+      example: ticket-event-a98c8f-7eb12
+    BuyMuseumTicketsResponse:
+      description: Details for a museum ticket after a successful purchase.
+      type: object
+      properties:
+        message:
+          $ref: '#/components/schemas/TicketMessage'
+        eventName:
+          $ref: '#/components/schemas/EventName'
+        ticketId:
+          $ref: '#/components/schemas/TicketId'
+        ticketType:
+          $ref: '#/components/schemas/TicketType'
+        ticketDate:
+          description: Date the ticket is valid for.
+          $ref: '#/components/schemas/Date'
+        confirmationCode:
+          $ref: '#/components/schemas/TicketConfirmation'
+      required:
+        - message
+        - ticketId
+        - ticketType
+        - ticketDate
+        - confirmationCode
+    GetTicketCodeResponse:
+      description: An image of a ticket with a QR code used for museum or event entry.
+      type: string
+      format: binary
+    GetMuseumHoursResponse:
+      description: List of museum operating hours for consecutive days.
+      type: array
+      items:
+        $ref: '#/components/schemas/MuseumDailyHours'
+    MuseumDailyHours:
+      description: Daily operating hours for the museum.
+      type: object
+      properties:
+        date:
+          description: Date the operating hours apply to.
+          $ref: '#/components/schemas/Date'
+          example: 2024-12-31
+        timeOpen:
+          type: string
+          pattern: '^([01]\d|2[0-3]):?([0-5]\d)$'
+          description: Time the museum opens on a specific date. Uses 24 hour time format (`HH:mm`).
+          example: 09:00
+        timeClose:
+          description: Time the museum closes on a specific date. Uses 24 hour time format (`HH:mm`).
+          type: string
+          pattern: '^([01]\d|2[0-3]):?([0-5]\d)$'
+          example: 18:00
+      required:
+        - date
+        - timeOpen
+        - timeClose
+    EventId:
+      description: Identifier for a special event.
+      type: string
+      format: uuid
+      example: 3be6453c-03eb-4357-ae5a-984a0e574a54
+    EventName:
+      type: string
+      description: Name of the special event
+      example: Pirate Coding Workshop
+    EventLocation:
+      type: string
+      description: Location where the special event is held
+      example: Computer Room
+    EventDescription:
+      type: string
+      description: Description of the special event
+      example: Captain Blackbeard shares his love of the C...language. And possibly Arrrrr (R lang).
+    EventDates:
+      type: array
+      items:
+        $ref: '#/components/schemas/Date'
+      description: List of planned dates for the special event
+    EventPrice:
+      description: Price of a ticket for the special event
+      type: number
+      format: float
+      example: 25
+    CreateSpecialEventRequest:
+      description: Request payload for creating new special events at the museum.
+      properties:
+        name:
+          $ref: '#/components/schemas/EventName'
+        location:
+          $ref: '#/components/schemas/EventLocation'
+        eventDescription:
+          $ref: '#/components/schemas/EventDescription'
+        dates:
+          $ref: '#/components/schemas/EventDates'
+        price:
+          $ref: '#/components/schemas/EventPrice'
+      required:
+        - name
+        - location
+        - eventDescription
+        - dates
+        - price
+    UpdateSpecialEventRequest:
+      description: Request payload for updating an existing special event. Only included fields are updated in the event.
+      properties:
+        name:
+          $ref: '#/components/schemas/EventName'
+        location:
+          $ref: '#/components/schemas/EventLocation'
+        eventDescription:
+          $ref: '#/components/schemas/EventDescription'
+        dates:
+          $ref: '#/components/schemas/EventDates'
+        price:
+          $ref: '#/components/schemas/EventPrice'
+    ListSpecialEventsResponse:
+      description: A list of upcoming special events
+      type: array
+      items:
+        $ref: '#/components/schemas/SpecialEventResponse'
+    SpecialEventResponse:
+      description: Information about a special event.
+      properties:
+        eventId:
+          $ref: '#/components/schemas/EventId'
+        name:
+          $ref: '#/components/schemas/EventName'
+        location:
+          $ref: '#/components/schemas/EventLocation'
+        eventDescription:
+          $ref: '#/components/schemas/EventDescription'
+        dates:
+          $ref: '#/components/schemas/EventDates'
+        price:
+          $ref: '#/components/schemas/EventPrice'
+      required:
+        - eventId
+        - name
+        - location
+        - eventDescription
+        - dates
+        - price
+  securitySchemes:
+    MuseumPlaceholderAuth:
+      type: http
+      scheme: basic
+  examples:
+    BuyGeneralTicketsRequestExample:
+      summary: General entry ticket
+      value:
+        ticketType: general
+        ticketDate: 2023-09-07
+        email: todd@example.com
+    BuyEventTicketsRequestExample:
+      summary: Special event ticket
+      value:
+        ticketType: general
+        eventId: dad4bce8-f5cb-4078-a211-995864315e39
+        ticketDate: 2023-09-05
+        email: todd@example.com
+    BuyGeneralTicketsResponseExample:
+      summary: General entry ticket
+      value:
+        message: Museum general entry ticket purchased
+        ticketId: 382c0820-0530-4f4b-99af-13811ad0f17a
+        ticketType: general
+        ticketDate: 2023-09-07
+        confirmationCode: ticket-general-e5e5c6-dce78
+    BuyEventTicketsResponseExample:
+      summary: Special event ticket
+      value:
+        message: Museum special event ticket purchased
+        ticketId: b811f723-17b2-44f7-8952-24b03e43d8a9
+        eventName: Mermaid Treasure Identification and Analysis
+        ticketType: event
+        ticketDate: 2023-09-05
+        confirmationCode: ticket-event-9c55eg-8v82a
+    CreateSpecialEventRequestExample:
+      summary: Create special event
+      value:
+        name: Mermaid Treasure Identification and Analysis
+        location: Under the seaaa 🦀 🎶 🌊.
+        eventDescription: Join us as we review and classify a rare collection of 20 thingamabobs, gadgets, gizmos, whoosits, and whatsits, kindly donated by Ariel.
+        dates:
+          - 2023-09-05
+          - 2023-09-08
+        price: 0
+    CreateSpecialEventResponseExample:
+      summary: Special event created
+      value:
+        eventId: dad4bce8-f5cb-4078-a211-995864315e39
+        name: Mermaid Treasure Identification and Analysis
+        location: Under the seaaa 🦀 🎶 🌊.
+        eventDescription: Join us as we review and classify a rare collection of 20 thingamabobs, gadgets, gizmos, whoosits, and whatsits, kindly donated by Ariel.
+        dates:
+          - 2023-09-05
+          - 2023-09-08
+        price: 30
+    GetSpecialEventResponseExample:
+      summary: Get special event
+      value:
+        eventId: 6744a0da-4121-49cd-8479-f8cc20526495
+        name: Time Traveler Tea Party
+        location: Temporal Tearoom
+        eventDescription: Sip tea with important historical figures.
+        dates:
+          - 2023-11-18
+          - 2023-11-25
+          - 2023-12-02
+        price: 60
+    ListSpecialEventsResponseExample:
+      summary: List of special events
+      value:
+        - eventId: f3e0e76e-e4a8-466e-ab9c-ae36c15b8e97
+          name: Sasquatch Ballet
+          location: Seattle... probably
+          eventDescription: They're big, they're hairy, but they're also graceful. Come learn how the biggest feet can have the lightest touch.
+          dates:
+            - 2023-12-15
+            - 2023-12-22
+          price: 40
+        - eventId: 2f14374a-9c65-4ee5-94b7-fba66d893483
+          name: Solar Telescope Demonstration
+          location: Far from the sun.
+          eventDescription: Look at the sun without going blind!
+          dates:
+            - 2023-09-07
+            - 2023-09-14
+          price: 50
+        - eventId: 6aaa61ba-b2aa-4868-b803-603dbbf7bfdb
+          name: Cook like a Caveman
+          location: Fire Pit on East side
+          eventDescription: Learn to cook on an open flame.
+          dates:
+            - 2023-11-10
+            - 2023-11-17
+            - 2023-11-24
+          price: 5
+        - eventId: 602b75e1-5696-4ab8-8c7a-f9e13580f910
+          name: Underwater Basket Weaving
+          location: Rec Center Pool next door.
+          eventDescription: Learn to weave baskets underwater.
+          dates:
+            - 2023-09-12
+            - 2023-09-15
+          price: 15
+        - eventId: dad4bce8-f5cb-4078-a211-995864315e39
+          name: Mermaid Treasure Identification and Analysis
+          location: Room Sea-12
+          eventDescription: Join us as we review and classify a rare collection of 20 thingamabobs, gadgets, gizmos, whoosits, and whatsits — kindly donated by Ariel.
+          dates:
+            - 2023-09-05
+            - 2023-09-08
+          price: 30
+        - eventId: 6744a0da-4121-49cd-8479-f8cc20526495
+          name: Time Traveler Tea Party
+          location: Temporal Tearoom
+          eventDescription: Sip tea with important historical figures.
+          dates:
+            - 2023-11-18
+            - 2023-11-25
+            - 2023-12-02
+          price: 60
+        - eventId: 3be6453c-03eb-4357-ae5a-984a0e574a54
+          name: Pirate Coding Workshop
+          location: Computer Room
+          eventDescription: Captain Blackbeard shares his love of the C...language. And possibly Arrrrr (R lang).
+          dates:
+            - 2023-10-29
+            - 2023-10-30
+            - 2023-10-31
+          price: 45
+        - eventId: 9d90d29a-2af5-4206-97d9-9ea9ceadcb78
+          name: Llama Street Art Through the Ages
+          location: Auditorium
+          eventDescription: Llama street art?! Alpaca my bags -- let's go!
+          dates:
+            - 2023-10-29
+            - 2023-10-30
+            - 2023-10-31
+          price: 45
+        - eventId: a3c7b2c4-b5fb-4ef7-9322-00a919864957
+          name: The Great Parrot Debate
+          location: Outdoor Amphitheatre
+          eventDescription: See leading parrot minds discuss important geopolitical issues.
+          dates:
+            - 2023-11-03
+            - 2023-11-10
+          price: 35
+        - eventId: b92d46b7-4c5d-422b-87a5-287767e26f29
+          name: Eat a Bunch of Corn
+          location: Cafeteria
+          eventDescription: We accidentally bought too much corn. Please come eat it.
+          dates:
+            - 2023-11-10
+            - 2023-11-17
+            - 2023-11-24
+          price: 5
+    UpdateSpecialEventRequestExample:
+      summary: Update special event request
+      value:
+        location: On the beach.
+        price: 15
+    UpdateSpecialEventResponseExample:
+      summary: Update special event
+      value:
+        eventId: dad4bce8-f5cb-4078-a211-995864315e39
+        name: Mermaid Treasure Identification and Analysis
+        location: On the beach.
+        eventDescription: Join us as we review and classify a rare collection of 20 thingamabobs, gadgets, gizmos, whoosits, and whatsits, kindly donated by Ariel.
+        dates:
+          - 2023-09-05
+          - 2023-09-08
+        price: 15
+    GetMuseumHours:
+      summary: Museum opening hours
+      value:
+        - date: '2023-09-11'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-12'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-13'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-14'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-15'
+          timeOpen: '10:00'
+          timeClose: '16:00'
+        - date: '2023-09-18'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-19'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-20'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-21'
+          timeOpen: '09:00'
+          timeClose: '18:00'
+        - date: '2023-09-22'
+          timeOpen: '10:00'
+          timeClose: '16:00'
+    ClosedMuseumHours:
+      summary: The museum is closed
+      value: []
+  parameters:
+    PaginationPage:
+      name: page
+      in: query
+      description: The page number to retrieve.
+      schema:
+        type: integer
+        default: 1
+        example: 2
+    PaginationLimit:
+      name: limit
+      in: query
+      description: The number of days per page.
+      schema:
+        type: integer
+        default: 10
+        maximum: 30
+        example: 15
+    EventId:
+      name: eventId
+      in: path
+      description: An identifier for a special event.
+      required: true
+      schema:
+        type: string
+        format: uuid
+        example: dad4bce8-f5cb-4078-a211-995864315e39
+    StartDate:
+      name: startDate
+      in: query
+      description: The starting date to retrieve future operating hours from. Defaults to today's date.
+      schema:
+        type: string
+        format: date
+        example: 2023-02-23
+    EndDate:
+      name: endDate
+      in: query
+      description: The end of a date range to retrieve special events for. Defaults to 7 days after `startDate`.
+      schema:
+        type: string
+        format: date
+        example: 2023-04-18
+    TicketId:
+      name: ticketId
+      in: path
+      description: An identifier for a ticket to a museum event. Used to generate ticket image.
+      required: true
+      schema:
+        type: string
+        format: uuid
+        example: a54a57ca-36f8-421b-a6b4-2e8f26858a4c
+
+tags:
+  - name: Operations
+    x-displayName: About the museum
+    description: Operational information about the museum.
+  - name: Events
+    x-displayName: Upcoming events
+    description: Special events hosted by the Museum.
+  - name: Tickets
+    x-displayName: Buy tickets
+    description: Museum tickets for general entrance or special events.
+
+x-tagGroups:
+  - name: Plan your visit
+    tags:
+      - Operations
+      - Events
+  - name: Purchases
+    tags:
+      - Tickets
+  - name: Entities
+    tags:
+      - Schemas
+
+security:
+  - MuseumPlaceholderAuth: []

demo/openapi-3-1.yaml

@@ -1139,6 +1139,7 @@ components:
           type: [string, integer, 'null']
           minItems: 1
           maxItems: 10
+          default: []
           xml:
             name: photoUrl
             wrapped: true

demo/openapi.yaml

@@ -106,6 +106,10 @@ paths:
     post:
       tags:
         - pet
+      x-badges:
+        - name: 'Beta'
+          position: before
+          color: purple
       summary: Add a new pet to the store
       description: Add new pet to the store inventory.
       operationId: addPet
@@ -150,6 +154,9 @@ paths:
     put:
       tags:
         - pet
+      x-badges:
+        - name: 'Alpha'
+          color: purple
       summary: Update an existing pet
       description: ''
       operationId: updatePet
@@ -183,6 +190,8 @@ paths:
     get:
       tags:
         - pet
+      x-badges:
+        - name: 'Gamma'
       summary: Find pet by ID
       description: Returns a single pet
       operationId: getPetById
@@ -1047,6 +1056,7 @@ components:
         photoUrls:
           description: The list of URL to a cute photos featuring pet
           type: array
+          default: []
           maxItems: 20
           xml:
             name: photoUrl
@@ -1073,6 +1083,10 @@ components:
             - available
             - pending
             - sold
+          x-enumDescriptions:
+            available: Available status
+            pending: Pending status
+            sold: Sold status
         petType:
           description: Type of a pet
           type: string
@@ -1176,6 +1190,7 @@ components:
               name:
                 type: string
                 description: hooray
+                default: []
       description: Pet object that needs to be added to the store
       required: true
     UserArray:

demo/playground/hmr-playground.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import type { RedocRawOptions } from '../../src/services/RedocNormalizedOptions';
-import RedocStandalone from './hot';
+import { RedocStandalone } from '../../src';
 
 const big = window.location.search.indexOf('big') > -1;
 const swagger = window.location.search.indexOf('swagger') > -1;
@@ -9,8 +9,14 @@ const swagger = window.location.search.indexOf('swagger') > -1;
 const userUrl = window.location.search.match(/url=(.*)$/);
 
 const specUrl =
-  (userUrl && userUrl[1]) || (swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml');
+  (userUrl && userUrl[1]) || (swagger ? 'museum.yaml' : big ? 'big-openapi.json' : 'museum.yaml');
 
-const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 3 };
+const options: RedocRawOptions = {
+  nativeScrollbars: false,
+  maxDisplayedEnumValues: 3,
+  schemaDefinitionsTagName: 'schemas',
+};
 
-render(<RedocStandalone specUrl={specUrl} options={options} />, document.getElementById('example'));
+const container = document.getElementById('example');
+const root = createRoot(container!);
+root.render(<RedocStandalone specUrl={specUrl} options={options} />);

demo/playground/hot.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-// eslint-disable-next-line import/no-internal-modules
-import { hot } from 'react-hot-loader/root';
-import { RedocStandalone as RedocStandaloneOrig, RedocStandaloneProps } from '../../src';
-
-const RedocStandalone = function (props: RedocStandaloneProps) {
-  return <RedocStandaloneOrig {...props} />;
-}
-
-export default hot(RedocStandalone);

demo/playground/index.html

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>ReDoc</title>
+    <title>Redoc</title>
     <style>
       body {
         margin: 0;
@@ -15,11 +14,13 @@
         display: block;
       }
     </style>
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
     <redoc id="example"></redoc>
   </body>
-
 </html>

demo/swagger.yaml

@@ -780,6 +780,7 @@ definitions:
       photoUrls:
         description: The list of URL to a cute photos featuring pet
         type: array
+        default: []
         xml:
           name: photoUrl
           wrapped: true

demo/webpack.config.ts

@@ -14,7 +14,7 @@ function root(filename) {
   return resolve(__dirname + '/' + filename);
 }
 
-export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({
+export default (env: { playground?: boolean; bench?: boolean } = {}) => ({
   entry: [
     root('../src/polyfills.ts'),
     root(
@@ -51,12 +51,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       fs: false,
       os: false,
     },
-    alias:
-      mode !== 'production'
-        ? {
-            'react-dom': '@hot-loader/react-dom',
-          }
-        : {},
   },
 
   performance: false,
@@ -121,7 +115,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
     webpackIgnore(/json-schema-ref-parser\/lib\/dereference\.js/),
     webpackIgnore(/^\.\/SearchWorker\.worker$/),
     new CopyWebpackPlugin({
-      patterns: ['demo/openapi.yaml'],
+      patterns: ['demo/museum.yaml'],
     }),
   ],
 });

docs/config.md

@@ -0,0 +1,311 @@
+# Configure Redoc
+
+Getting your documentation just right is important, and Redoc comes with many configuration options to help you succeed in that mission.
+
+Each deployment type has documentation on how to configure options for that type of Redoc project. This page lists all the options you can use with Redoc.
+
+**Versions: 2.x**
+
+{% admonition type="success" name="Client-side configuration" %}
+
+Using Redoc as a standalone (HTML or React) tool, these options must be presented in [kebab case](https://en.wikipedia.org/wiki/Letter_case#Kebab_case).
+For example, `scrollYOffset` becomes `scroll-y-offset`, and `expandResponses` becomes `expand-responses`.
+
+{% /admonition %}
+
+## Functional settings
+
+
+### disableSearch
+
+Disables search indexing and hides the search box from the API documentation page.
+
+### minCharacterLengthToInitSearch
+
+Sets the minimum amount of characters that need to be typed into the search dialog to initiate the search.
+
+_Default: 3_
+
+### hideDownloadButtons
+
+Hides the 'Download' button for saving the API definition source file. **This setting does not make the API definition private**; it just hides the button.
+
+### hideLoading
+
+Hides the loading animation. Does not apply to CLI or Workflows-rendered docs.
+
+### hideSchemaTitles
+
+Hides the schema title next to to the type.
+
+### jsonSamplesExpandLevel
+
+Sets the default expand level for JSON payload samples (response and request body). The default value is 2, and the maximum supported value is '+Infinity'. It can also be configured as a string with the special value `all` that expands all levels.
+
+_Default: 2_
+
+### maxDisplayedEnumValues
+
+Displays only the specified number of enum values. The remaining values are hidden in an expandable area. If not set, all values are displayed.
+
+### onlyRequiredInSamples
+
+Shows only required fields in request samples.
+
+### sortRequiredPropsFirst
+
+Shows required properties in schemas first, ordered in the same order as in the required array.
+
+### schemasExpansionLevel
+
+Specifies whether to automatically expand schemas in Reference docs. Set it to `all` to expand all schemas regardless of their level, or set it to a number to expand schemas up to the specified level. For example, `schemasExpansionLevel: 3` expands schemas up to three levels deep. The default value is `0`, meaning no schemas are expanded automatically.
+
+### scrollYOffset
+
+Specifies a vertical scroll-offset.
+This setting is useful when there are fixed positioned elements at the top of the page, such as navbars, headers, etc.
+
+Note that you can specify the `scrollYOffset` value in any of the following ways:
+- as a number - a fixed number of pixels to be used as the offset.
+- as a CSS selector - the selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom is used as the offset.
+- a function (advanced) - a getter function. Must return a number representing the offset (in pixels).
+
+### showExtensions
+
+Shows specification extensions ('x-' fields). Extensions used by Redoc are ignored. The value can be boolean or an array of strings with names of extensions to display. When used as boolean and set to `true`, all specification extensions are shown.
+
+### sanitize
+
+If set to `true`, the API definition is considered untrusted and all HTML/Markdown is sanitized to prevent XSS.
+
+### downloadUrls
+
+Set the URLs used to download the OpenAPI description or other documentation related files from the API documentation page.
+
+### schemaDefinitionsTagName
+
+If a value is set, all of the schemas are rendered with the designated tag name. The schemas then render and display in the sidebar navigation (with that associated tag name).
+
+### generatedSamplesMaxDepth
+
+The generatedSamplesMaxDepth option controls how many schema levels automatically generated for payload samples. The default is 8 which works well for most APIs, but you can adjust it if necessary for your use case.
+
+### hidePropertiesPrefix
+
+In complex data structures or object schemas where properties are nested within parent objects the hidePropertiesPrefix option enables the hiding of parent names for nested properties within the documentation.
+
+_Default: true_
+
+## Deprecated Functional settings
+
+### hideDownloadButton
+
+Hides the 'Download' button for saving the API definition source file. **This setting does not make the API definition private**; it just hides the button.
+
+### downloadFileName
+
+Sets the filename for the downloaded API definition source file.
+
+### downloadDefinitionUrl
+
+Sets the URL for the downloaded API definition source file.
+
+### requiredPropsFirst
+
+Shows required properties in schemas first, ordered in the same order as in the required array.
+
+### jsonSampleExpandLevel
+
+Sets the default expand level for JSON payload samples (response and request body). The default value is 2, and the maximum supported value is '+Infinity'. It can also be configured as a string with the special value `all` that expands all levels.
+
+_Default: 2_
+
+### schemaExpansionLevel
+
+Specifies whether to automatically expand schemas in Reference docs. Set it to `all` to expand all schemas regardless of their level, or set it to a number to expand schemas up to the specified level. For example, `schemaExpansionLevel: 3` expands schemas up to three levels deep. The default value is `0`, meaning no schemas are expanded automatically.
+
+
+### expandDefaultServerVariables
+
+Enables or disables expanding default server variables.
+
+### expandResponses
+
+Controls which responses to expand by default. Specify one or more responses by providing their response codes as a comma-separated list without spaces, for example `expandResponses='200,201'`. Special value 'all' expands all responses by default. Be careful: this option can slow down documentation rendering time.
+
+### expandSingleSchemaField
+
+Automatically expands the single field in a schema.
+
+### hideHostname
+
+If set to `true`, the protocol and hostname are not shown in the operation definition.
+
+### hideRequestPayloadSample
+
+Hides request payload examples.
+
+### hideOneOfDescription
+
+If set to `true`, the description for `oneOf`/`anyOf` object is not shown in the schema.
+
+### hideSchemaPattern
+
+If set to `true`, the pattern is not shown in the schema.
+
+### hideSecuritySection
+
+Hides the Security panel section.
+
+### hideSingleRequestSampleTab
+
+Hides the request sample tab for requests with only one sample.
+
+### menuToggle
+
+If set to `true`, selecting an expanded item in the sidebar twice collapses it.
+
+_Default: true_
+
+### nativeScrollbars
+
+If set to `true`, the sidebar uses the native scrollbar instead of perfect-scroll. This setting is a scrolling performance optimization for big API definitions.
+
+### pathInMiddlePanel
+
+Shows the path link and HTTP verb in the middle panel instead of the right panel.
+
+### payloadSampleIdx
+
+If set, the payload sample is inserted at the specified index. If there are `N` payload samples and the value configured here is bigger than `N`, the payload sample is inserted last. Indexes start from 0.
+
+### showObjectSchemaExamples
+
+Shows object schema example in the properties; default `false`.
+
+### showWebhookVerb
+
+When set to `true`, shows the HTTP request method for webhooks in operations and in the sidebar.
+
+### simpleOneOfTypeLabel
+
+Shows only unique `oneOf` types in the label without titles.
+
+### sortEnumValuesAlphabetically
+
+When set to `true`, sorts all enum values in all schemas alphabetically.
+
+### sortOperationsAlphabetically
+
+When set to `true`, sorts operations in the navigation sidebar and in the middle panel alphabetically.
+
+### sortPropsAlphabetically
+
+When set to `true`, sorts properties in all schemas alphabetically.
+
+### sortTagsAlphabetically
+
+When set to true, sorts tags in the navigation sidebar and in the middle panel alphabetically. Note that only tags are sorted alphabetically in the middle panel, not the operations associated with each tag. To sort operations alphabetically as well, you must set the `sortOperationsAlphabetically` setting to `true`.
+
+_Default: false_
+
+### untrustedSpec
+
+If set to `true`, the API definition is considered untrusted and all HTML/Markdown is sanitized to prevent XSS.
+
+## Theme settings
+Change styles for the API documentation page. **Supported in Redoc CE 2.x**.
+* `spacing`
+  * `unit`: 5 # main spacing unit used in autocomputed theme values later
+  * `sectionHorizontal`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
+  * `sectionVertical`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
+* `breakpoints` # breakpoints for switching three/two and mobile view layouts
+  * `small`: '50rem'
+  * `medium`: '85rem'
+  * `large`: '105rem'
+* `colors`
+  * `tonalOffset`: 0.3 # default tonal offset used in computations
+* `typography`
+  * `fontSize`: '14px'
+  * `lineHeight`: '1.5em'
+  * `fontWeightRegular`: '400'
+  * `fontWeightBold`: '600'
+  * `fontWeightLight`: '300'
+  * `fontFamily`: 'Roboto, sans-serif'
+  * `smoothing`: 'antialiased'
+  * `optimizeSpeed`: true
+  * `headings`
+    * `fontFamily`: 'Montserrat, sans-serif'
+    * `fontWeight`: '400'
+    * `lineHeight`: '1.6em'
+  * `code` # inline code styling
+    * `fontSize`: '13px'
+    * `fontFamily`: 'Courier, monospace'
+    * `lineHeight`: # COMPUTED: typography.lineHeight
+    * `fontWeight`: # COMPUTED: typography.fontWeightRegular
+    * `color`: '#e53935'
+    * `backgroundColor`: 'rgba(38, 50, 56, 0.05)'
+    * `wrap`: false # whether to break word for inline blocks (otherwise they can overflow)
+  * `links`
+    * `color`: # COMPUTED: colors.primary.main
+    * `visited`: # COMPUTED: typography.links.color
+    * `hover`: # COMPUTED: lighten(0.2 typography.links.color)
+    * `textDecoration`: 'auto'
+    * `hoverTextDecoration`: 'auto'
+* `sidebar`
+  * `width`: '260px'
+  * `backgroundColor`: '#fafafa'
+  * `textColor`: '#333333'
+  * `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
+  * `groupItems` # Group headings
+    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
+    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
+    * `textTransform`: 'uppercase'
+  * `level1Items` # Level 1 items like tags or section 1st level items
+    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
+    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
+    * `textTransform`: 'none'
+  * `arrow` # sidebar arrow
+    * `size`: '1.5em'
+    * `color`: # COMPUTED: theme.sidebar.textColor
+* `logo`
+  * `maxHeight`: # COMPUTED: sidebar.width
+  * `maxWidth`: # COMPUTED: sidebar.width
+  * `gutter`: '2px' # logo image padding
+* `rightPanel`
+  * `backgroundColor`: '#263238'
+  * `width`: '40%'
+  * `textColor`: '#ffffff'
+  * `servers`
+    * `overlay`
+      * `backgroundColor`: '#fafafa'
+      * `textColor`: '#263238'
+    * `url`
+      * `backgroundColor`: '#fff'
+* `fab`
+  * `backgroundColor`: '#263238'
+  * `color`: '#ffffff'
+
+## Additional customization
+
+### Security Definition location
+
+You can inject the Security Definitions widget into any place in your definition `description`.
+For more information, refer to [Security definitions injection](./security-definitions-injection.md).
+
+### OpenAPI specification extensions
+
+Redoc uses the following [specification extensions](https://redocly.com/docs-legacy/api-reference-docs/spec-extensions/):
+* [`x-logo`](./redoc-vendor-extensions.md#x-logo) - is used to specify API logo
+* [`x-traitTag`](./redoc-vendor-extensions.md#x-traittag) - useful for handling out common things like Pagination, Rate-Limits, etc
+* [`x-codeSamples`](./redoc-vendor-extensions.md#x-codesamples) - specify operation code samples
+* [`x-examples`](./redoc-vendor-extensions.md#x-examples) - specify JSON example for requests
+* [`x-nullable`](./redoc-vendor-extensions.md#x-nullable) - mark schema param as a nullable
+* [`x-displayName`](./redoc-vendor-extensions.md#x-displayname) - specify human-friendly names for the menu categories
+* [`x-tagGroups`](./redoc-vendor-extensions.md#x-taggroups) - group tags by categories in the side menu
+* [`x-servers`](./redoc-vendor-extensions.md#x-servers) - ability to specify different servers for API (backported from OpenAPI 3.0)
+* [`x-additionalPropertiesName`](./redoc-vendor-extensions.md#x-additionalpropertiesname) - ability to supply a descriptive name for the additional property keys
+* [`x-summary`](./redoc-vendor-extensions.md#x-summary) - For Response object, use as the response button text, with description rendered under the button
+* [`x-explicitMappingOnly`](./redoc-vendor-extensions.md#x-explicitmappingonly) - In Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object
+
+

docs/deployment/cli.md

@@ -1,27 +1,26 @@
 ---
+seo:
   title: Use the Redoc CLI
-redirectFrom:
-  - /docs/redoc/quickstart/cli/
 ---
 
 # How to use the Redocly CLI
 
 With Redocly CLI, you can bundle your OpenAPI definition and API documentation
-(made with Redoc) into a zero-dependency HTML file and render it locally.
+(made with Redoc) into an HTML file and render it locally.
 
 ## Step 1 - Install Redocly CLI
 
 First, you need to install the `@redocly/cli` package.
 
-You can install it [globally](/docs/cli/installation.md#install-globally) using npm or Yarn.
+You can install it [globally](../../cli/installation.md#install-globally) using npm or Yarn.
 
-Or you can install it during [runtime](/docs/cli/installation.md#use-npx-at-runtime) using npx or Docker.
+Or you can install it during [runtime](../../cli/installation.md#use-npx-at-runtime) using npx or Docker.
 
 ## Step 2 - Build the HTML file
 
-The Redocly CLI `build-docs` command builds Redoc into a zero-dependency HTML file.
+The Redocly CLI `build-docs` command builds Redoc into an HTML file.
 
-To build a zero-dependency HTML file using Redocly CLI, enter the following command,
+To build an HTML file using Redocly CLI, enter the following command,
 replacing `apis/openapi.yaml` with your API definition file's name and path:
 
 ```bash

docs/deployment/docker.md

@@ -1,7 +1,6 @@
 ---
+seo:
   title: Use the Redoc Docker image
-redirectFrom:
-  - /docs/redoc/quickstart/docker/
 ---
 
 # How to use the Redoc Docker image

docs/deployment/html.md

@@ -1,123 +1,140 @@
 ---
+seo:
   title: Use the Redoc HTML element
-redirectFrom:
-  - /docs/redoc/quickstart/html/
 ---
 
-# How to use the Redoc HTML element
+# Use Redoc in HTML
 
-## Step 1 - Install Redoc
+To render API documentation in an HTML page, start with the template below and
+replace the `spec-url` value with the local file path or URL of your API
+description.
 
-You can install Redoc using one of the following package managers:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Redoc</title>
+    <!-- needed for adaptive design -->
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
 
-- [npm](https://docs.npmjs.com/about-npm)
+    <!--
-- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)
+    Redoc doesn't change outer page styles
-
+    -->
-:::attention Initialize your package manager
+    <style>
-If you do not have a `package.json` file in your project directory,
+      body {
-you need to add one by initializing npm or yarn in your project. Use the command `npm init` for npm,
+        margin: 0;
-or `yarn init` for yarn. These initialization commands lead you through the process
+        padding: 0;
-of creating a `package.json` file in your project.
+      }
-
+    </style>
-For more information, see
+  </head>
-[Creating a package.json file](https://docs.npmjs.com/creating-a-package-json-file)
+  <body>
-in the npm documentation or [Yarn init](https://classic.yarnpkg.com/en/docs/cli/init/)
+    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
-in the yarn documentation.
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
-:::
+  </body>
-
+</html>
-### Install Redoc with yarn
-
-After navigating to your project directory in your terminal, use the following command:
-
-```bash
-yarn add redoc
 ```
 
-### Install Redoc with npm
+{% admonition type="success" name="URL or local file" %}
+Set `spec-url` to a relative path if the file is local, e.g. `spec-url=my-api.yaml`. Use a full URL like the example above if it's hosted elsewhere.
+{% /admonition %}
 
-After navigating to your project directory in your terminal, use the following command:
+Open the HTML file in your browser to see the HTML documentation rendering. You may want to read the next section and add some configuration to make your documentation your own.
 
-```bash
+## Configure Redoc
-npm i redoc
+
+Redoc is highly configurable, find a [full list of configuration options](../config.md) on the dedicated page.
+
+To configure Redoc in HTML, add the property names to the HTML tag. Here's an example that makes all the required properties display first in the list:
+
+```html
+    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json' required-props-first=true></redoc>
 ```
 
-## Step 2 - Reference the Redoc script
+Any of the individual properties can be added to the tag, as many as you need to get your API docs set up as you like them.
+
+### Theme configuration
+
+The `theme` configuration setting is more complex since it represents many nested options, you can supply these as a JSON string to the `theme` attribute. For example, to change the sidebar color you would use a tag like this:
+
+```html
+    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'
+       required-props-first=true
+       theme='{
+         "sidebar": {
+           "backgroundColor": "lightblue"
+         }
+       }'
+    ></redoc>
+```
+
+Check out the [list of options for theme configuration](../config.md#theme-settings) and build up the configuration that suits your API needs.
+
+## Advanced options
+
+### The Redoc object
+
+As an alternative to the HTML tag, you can also initialise Redoc in a web page using the Redoc object and invoking it from JavaScript. This is useful for situations where you want to create dynamic content in a page, and also provides a simple way to attach the Redoc element to an existing container.
+
+The Redoc object offers an `init` function:
+
+```js
+Redoc.init(specOrSpecUrl, options, element, callback)
+```
+- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a file name/URL to the
+  definition in JSON or YAML format.
+- `options`: See the [configuration reference](../config.md).
+- `element`: DOM element Redoc is inserted into.
+- `callback`(optional): Callback to be called after Redoc has been fully rendered.
+  It is also called on errors with `error` as the first argument.
+
+Call `Redoc.init()` from the JavaScript on a web page to add the element to the named container. Below is an example of an HTML page with a `<div>` tag, and the JavaScript to add the Redoc object to it.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head />
+  <body>
+    <H1>Redoc in action</H1>
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
+    <div id="redoc-container"></div>
+
+    <script>
+      Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
+        "expandResponses": "200,400"
+      }, document.getElementById('redoc-container'))
+    </script>
+  </body>
+</html>
+```
+
+This example also sets the configuration for `expandResponses` so all 200 and 400 status responses are shown unfolded and with their details visible when the page loads.
+
+### Self-host dependencies
 
 You can reference the Redoc script using either a link to the files hosted on a CDN
-or the files located in your `node modules` folder.
+or install to your `node-modules` folder. Using the CDN is the simplest option, but
+if you need to host in a closed environment or have requirements around external
+dependencies, it may be useful to self-host.
 
-### CDN link
+The main example shows using the CDN:
-
-To reference the Redoc script with a CDN link:
 
 ```html
 <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
 ```
 
-### Node modules link
+If you would instead prefer to host the depdencies yourself, first install `redoc` using `npm`:
 
-To reference the Redoc script with a node modules link:
+```sh
+npm install redoc
+```
+
+_(Yarn users can install the `redoc` package with `yarn`)_.
+
+You can then reference the Redoc script with a node modules link:
 
 ```html
 <script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>
 ```
 
-## Step 3 - Add the <redoc> element
-
-You can add the <redoc> element to your HTML page and reference your OpenAPI
-definition using the `spec-url` attribute, or you can initialize Redoc using
-a globally exposed Redoc object.
-
-### The `spec-url` attribute
-
-To add the <redoc> element with the `spec-url` attribute:
-
-```html
-<redoc spec-url="url/to/your/spec"></redoc>
-```
-
-#### Examples
-
-```html
-<redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
-```
-
-You can also use a local file (JSON or YAML) in your project, for instance:
-
-```html
-<redoc spec-url="dist.json"></redoc>
-```
-
-### The Redoc object
-
-To add the <redoc> element with a globally exposed Redoc object:
-
-```js
-Redoc.init(specOrSpecUrl, options, element, callback)
-```
-- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a URL to the
-  definition in JSON or YAML format.
-- `options`: See [`theme.openapi` object](/docs/api-reference-docs/configuration/functionality.mdx) reference.
-- `element`: DOM element Redoc is inserted into.
-- `callback`(optional): Callback to be called after Redoc has been fully rendered.
-  It is also called on errors with `error` as the first argument.
-
-#### Examples
-
-```html
-<script>
-Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
-  scrollYOffset: 50
-}, document.getElementById('redoc-container'))
-</script>
-```
-
-You can also use a local file (JSON or YAML) in your project, for instance:
-
-```html
-<script>
-Redoc.init('dist.yaml', {
-  scrollYOffset: 50
-}, document.getElementById('redoc-container'))
-</script>
-```

docs/deployment/intro.md

@@ -1,7 +1,6 @@
 ---
+seo:
   title: Redoc deployment guide
-redirectFrom:
-  - /docs/redoc/quickstart/intro/
 ---
 
 # Redoc deployment guide
@@ -31,16 +30,16 @@ The following options are supported:
 You need an OpenAPI definition. For testing purposes, you can use one of the following sample OpenAPI definitions:
 
 - OpenAPI 3.0
-  - [Rebilly Users OpenAPI Definition](https://raw.githubusercontent.com/Rebilly/api-definitions/main/openapi/users.yaml)
+  - [Museum Example API](https://github.com/Redocly/museum-openapi-example/blob/main/openapi.yaml)
-  - [Swagger Petstore Sample OpenAPI Definition](https://petstore3.swagger.io/api/v3/openapi.json)
+  - [Petstore Sample OpenAPI Definition](https://petstore3.swagger.io/api/v3/openapi.json)
 - OpenAPI 2.0
   - [Thingful OpenAPI Definition](https://raw.githubusercontent.com/thingful/openapi-spec/master/spec/swagger.yaml)
   - [Fitbit Plus OpenAPI Definition](https://raw.githubusercontent.com/TwineHealth/TwineDeveloperDocs/master/spec/swagger.yaml)
 
-:::info OpenAPI specification
+{% admonition type="info" name="OpenAPI specification" %}
 For more information on the OpenAPI specification, refer to the [Learning OpenAPI 3](https://redocly.com/docs/resources/learning-openapi/)
 section in the documentation.
-:::
+{% /admonition %}
 
 ### How to run Redoc locally
 

docs/deployment/react.md

@@ -1,7 +1,9 @@
 ---
+seo:
   title: Use the Redoc React component
-redirectFrom:
+redirects:
-  - /docs/redoc/quickstart/react/
+  '/docs/redoc/quickstart/react/':
+    to: '/docs/redoc/deployment/react/'
 ---
 
 # How to use the Redoc React component
@@ -71,7 +73,7 @@ is fully rendered or when an error occurs (with an error as the first argument).
 ```js
 <RedocStandalone
   specUrl="http://petstore.swagger.io/v2/swagger.json"
-  onLoaded={error => {
+  onLoaded={(error) => {
     if (!error) {
       console.log('Yay!');
     }

docs/index.md

@@ -0,0 +1,97 @@
+---
+seo:
+  title: Redoc
+---
+
+# Redoc: Open source API documentation tool
+
+Redoc is a clean and easy way to produce web-ready documentation from an OpenAPI description (Swagger is also still supported). With one command, create your documentation, and customize it to meet the needs of your users.
+
+Redoc is based around a three panel layout, with clear sections for navigation, detailed documentation, and request/response examples.
+
+## Headline features
+
+* Modern layout with extensive customization options.
+* Support for OpenAPI 3.1, 3.0 and older 2.0 and Swagger formats.
+* Embed or build standalone HTML documentation.
+* CLI tool for easy automation and local development.
+
+## Demo
+
+[Try the live demo](https://redocly.github.io/redoc/) and upload your own API specification there to try.
+
+## Usage
+
+Redoc is provided as a CLI tool (also distributed as a Docker image), HTML tag, and React component.
+
+### Generate documentation from the CLI
+
+If you have Node installed, quickly generate documentation using `npx`:
+
+```sh
+npx @redocly/cli build-docs openapi.yaml
+```
+
+The tool outputs by default to a file named `redoc-static.html` that you can open in your browser.
+
+> [Redocly CLI](https://github.com/Redocly/redocly-cli/) does more than docs, check it out and add linting, bundling and more to your API workflow.
+
+### Add an HTML element to the page
+
+Create an HTML page, or edit an existing one, and add the following:
+
+```html
+    <redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
+    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
+```
+
+Open the HTML file in your browser, and your API documentation is shown on the page.
+
+Add your own `spec-url` to the `<redoc>` tag; this attribute can also be a local file. The JavaScript library can also be installed locally using `npm` and served from your own server, see the [HTML deployment documentation](https://redocly.com/docs/redoc/deployment/html/) for more details.
+
+### More usage options
+
+Check out the [deployment documentation](./deployment/intro.md) for more options, and detailed documentation for each.
+
+## Configure Redoc
+
+Redoc is highly configurable. Each deployment option accepts configuration in a way that's appropriate to that platform, but the options are the same for each. For example:
+
+* Using [Redocly CLI](../cli/index.md), configuration goes in the `redocly.yaml` file, or can be supplied as command line parameters, such as `--theme.openapi.disableSearch`.
+* Using HTML or React, configure by setting `option` in the tag.
+
+Here's a sample `redocly.yaml` configuration file, showing a few common settings and tweaking some of the visual theme settings:
+
+```yaml
+theme:
+  openapi:
+    disableSearch: true
+    expandResponses: 200,202
+    jsonSamplesExpandLevel: 1
+
+    theme:
+      sidebar:
+        backgroundColor: '#eae0cc'
+        textColor: '#3d005b'
+      colors:
+        primary:
+          main: '#660099'
+      typography:
+        fontSize: 14pt
+        headings:
+          fontWeight: bold
+```
+
+Redocly CLI detects a file named `redocly.yaml` in the same directory as you run the command and uses it. See the documentation with a command like this:
+
+```sh
+redocly preview-docs openapi.yaml
+```
+
+There are many, many more options available. Visit the [configuration reference](./config.md) for a complete list.
+
+## Next steps
+
+* If you are new to OpenAPI, try the [OpenAPI starter project](../cli/openapi-starter.md) for a great introduction.
+* Ready to build documentation from an existing OpenAPI file? Go to the [Redoc quickstart](./quickstart.md) and get started.
+* Learn more about the project by visiting [Redoc on GitHub](https://github.com/Redocly/redoc).

docs/quickstart.md

@@ -1,4 +1,5 @@
 ---
+seo:
   title: Redoc quickstart guide
 ---
 
@@ -43,12 +44,10 @@ replace the `spec-url` attribute with the URL or local file address to your defi
 </html>
 ```
 
-:::attention Redoc requires an HTTP server to run locally
+{% admonition type="info" name="Redoc requires an HTTP server to run locally" %}
-
 Loading local OpenAPI definitions is impossible without running a web server because of issues with
 [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) and
 other security reasons. Refer to [Running Redoc locally](./deployment/intro.md#how-to-run-redoc-locally) for more information.
-
+{% /admonition %}
-:::
 
 For a more detailed explanation with step-by-step instructions and additional options for using Redoc, refer to the [Redoc deployment guide](./deployment/intro.md).

docs/redoc-vendor-extensions.md

@@ -10,9 +10,6 @@ You can use the following [vendor extensions](https://redocly.com/docs/openapi-v
     - [Tag Group Object](#tag-group-object)
       - [Fixed fields](#fixed-fields)
       - [x-tagGroups example](#x-taggroups-example)
-      - [x-ignoredHeaderParameters](#x-ignoredheaderparameters)
-          - [How to use with Redoc](#how-to-use-with-redoc-1)
-          - [x-ignoredHeaderParameters example](#x-ignoredheaderparameters-example)
   - [Info Object](#info-object)
     - [x-logo](#x-logo)
       - [How to use with Redoc](#how-to-use-with-redoc-2)
@@ -39,42 +36,43 @@ You can use the following [vendor extensions](https://redocly.com/docs/openapi-v
   - [Schema Object](#schema-object)
     - [x-nullable](#x-nullable)
       - [How to use with Redoc](#how-to-use-with-redoc-7)
-      - [x-extendedDiscriminator](#x-extendeddiscriminator)
-          - [How to use with Redoc](#how-to-use-with-redoc-8)
-          - [x-extendedDiscriminator example](#x-extendeddiscriminator-example)
     - [x-additionalPropertiesName](#x-additionalpropertiesname)
       - [How to use with Redoc](#how-to-use-with-redoc-9)
       - [x-additionalPropertiesName example](#x-additionalpropertiesname-example)
     - [x-explicitMappingOnly](#x-explicitmappingonly)
       - [How to use with Redoc](#how-to-use-with-redoc-10)
       - [x-explicitMappingOnly example](#x-explicitmappingonly-example)
+    - [x-enumDescriptions](#x-enumdescriptions)
+      - [How to use with Redoc](#how-to-use-with-redoc-11)
+      - [x-enumDescriptions example](#x-enumdescriptions-example)
 
-### Swagger Object
+## Swagger Object
-Extends the OpenAPI root [OpenAPI Object](https://redocly.com/docs/openapi-visual-reference/openapi/)
+Extends the OpenAPI root [OpenAPI Object](https://redocly.com/docs/openapi-visual-reference/openapi)
 
-#### x-servers
+### 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.
+Backported from OpenAPI 3.0 [`servers`](https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.0.md#server-object). Currently doesn't support templates.
 
-#### x-tagGroups
+### x-tagGroups
 
 | Field Name     | Type        | Description |
 | :------------- | :-----------: | :---------- |
 | x-tagGroups         | [ [Tag Group Object](#tag-group-object) ] | A list of tag groups |
 
-###### How to use with Redoc
+#### How to use with Redoc
 `x-tagGroups` is used to group tags in the side menu.
 Before you use `x-tagGroups`, make sure you **add all tags to a group**, since a tag that is not in a group, **is not displayed** at all!
 
 <a name="tagGroupObject"></a>
+
 #### Tag Group Object
 Information about tags group
-###### Fixed fields
+##### Fixed fields
 | Field Name  | Type      | Description |
 | :---------- | :--------: | :---------- |
 | name        | string     | The group name |
-| tags        | [ string ] | List of tags to include in this group
+| tags        | [ string ] | List of tags to include in this group |
 
-###### x-tagGroups example
+#### x-tagGroups example
 json
 ```json
 {
@@ -104,54 +102,33 @@ x-tagGroups:
       - Secondary Stats
 ```
 
-#### x-ignoredHeaderParameters
+## Info Object
-
-
-| Field Name                  |	Type	        | Description |
-| :-------------------------- | :-----------: | :---------- |
-| x-ignoredHeaderParameters   | [ string ] | A list of ignored headers |
-
-
-###### How to use with Redoc
-Use `x-ignoredHeaderParameters` to specify header parameter names which are ignored by Redoc.
-
-###### x-ignoredHeaderParameters example
-```yaml
-swagger: '2.0'
-info:
-  ...
-tags: [...]
-x-ignoredHeaderParameters:
-  - Accept
-  - User-Agent
-  - X-Test-Header
-```
-
-### Info Object
 Extends the OpenAPI [Info Object](https://redocly.com/docs/openapi-visual-reference/info/)
-#### x-logo
+
+### x-logo
 
 | Field Name     | Type        | Description |
 | :------------- | :-----------: | :---------- |
 | x-logo         | [Logo Object](#logo-object)  | The information about API logo |
 
-###### How to use with Redoc
+#### How to use with Redoc
 `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
+#### Fixed fields
 | Field Name      | Type    | Description |
 | :-------------- | :------: | :---------- |
-| url             | string   | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location
+| url             | string   | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location |
-| backgroundColor | string   | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet)
+| backgroundColor | string   | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) |
-| altText        | string   | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided.
+| altText        | string   | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided. |
-| href        | string   | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS.
+| href        | string   | The URL pointing to the contact page. Default to 'info.contact.url' field of the OAS. |
 
 
-###### x-logo example
+#### x-logo example
 json
 ```json
 {
@@ -177,19 +154,19 @@ info:
     altText: "Petstore logo"
 ```
 
-### Tag Object
+## Tag Object
 Extends the OpenAPI [Tag Object](https://redocly.com/docs/openapi-visual-reference/tags/)
 
-#### x-traitTag
+### 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) |
 
-###### How to use with Redoc
+#### How to use with Redoc
 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
+#### x-traitTag example
 json
 ```json
 {
@@ -205,28 +182,29 @@ description: Pagination description (can use markdown syntax)
 x-traitTag: true
 ```
 
-#### x-displayName
+### x-displayName
 
 | Field Name     | Type   | Description |
 | :------------- | :------: | :---------- |
 | x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
 
-### Operation Object vendor extensions
+## Operation Object vendor extensions
 Extends the OpenAPI [Operation Object](https://redocly.com/docs/openapi-visual-reference/operation/)
 
-#### x-codeSamples
+### x-codeSamples
 | Field Name     | Type   | Description |
 | :------------- | :------: | :---------- |
 | x-codeSamples | [ [Code Sample Object](#code-sample-object) ]  | A list of code samples associated with operation |
 
-###### How to use with Redoc
+#### How to use with Redoc
 `x-codeSamples` are rendered on the right panel in Redoc.
 
 <a name="codeSampleObject"></a>
-#### Code Sample Object
+
+### Code Sample Object
 Operation code sample
 
-###### Fixed fields
+#### Fixed fields
 | Field Name  | Type    | Description  |
 | :---------- | :------: | :----------- |
 | lang        | string   | Code sample language. Value should be one of the following [list](https://github.com/github/linguist/blob/master/lib/linguist/popular.yml) |
@@ -234,7 +212,7 @@ Operation code sample
 | source      | string   | Code sample source code |
 
 
-###### Code Sample Object example
+#### Code Sample Object example
 json
 ```json
 {
@@ -248,94 +226,46 @@ lang: JavaScript
 source: console.log('Hello World');
 ```
 
-### Parameter Object
+### x-badges
+| Field Name     | Type   | Description |
+| :------------- | :------: | :---------- |
+| x-badges | [[Badge Object](https://redocly.com/docs/realm/author/reference/openapi-extensions/x-badges#badge-object)] | A list of badges associated with the operation |
+
+## Parameter Object
 Extends the OpenAPI [Parameter Object](https://redocly.com/docs/openapi-visual-reference/parameter/)
 
-#### x-examples
+### x-examples
 | Field Name     |  Type    | Description |
 | :------------- | :------: | :---------- |
 | x-examples | [Example Object](https://redocly.com/docs/openapi-visual-reference/example/)  | Object that contains examples for the request. Applies when `in` is `body` and mime-type is `application/json` |
 
-###### How to use with Redoc
+#### How to use with Redoc
 `x-examples` are rendered in the JSON tab on the right panel in Redoc.
 
-### Response Object vendor extensions
+## Response Object vendor extensions
 Extends the OpenAPI [Response Object](https://redocly.com/docs/openapi-visual-reference/response/).
 
-#### x-summary
+### x-summary
 | Field Name     | Type   | Description |
 | :------------- | :------: | :---------- |
 | x-summary      | string   | a short summary of the response |
 
-###### How to use with Redoc
+#### How to use with Redoc
 If specified, you can use `x-summary` as the response button text, with description rendered under the button.
 
-### Schema Object
+## Schema Object
 Extends the OpenAPI [Schema Object](https://redocly.com/docs/openapi-visual-reference/schemas/)
 
-#### x-nullable
+### x-nullable
 | Field Name     | Type   | Description |
 | :------------- | :------: | :---------- |
 | x-nullable | boolean | marks schema as a nullable |
 
-###### How to use with Redoc
+#### How to use with Redoc
 Schemas marked as `x-nullable` are marked in Redoc with the label Nullable.
 
-#### x-extendedDiscriminator
+### x-additionalPropertiesName
-**ATTENTION**: This is a Redoc-specific vendor extension, and is not 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 |
-
-###### 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 is used as an extended discriminator.
-Redoc displays definition with selectpicker using which user can select value of the `x-extendedDiscriminator`-marked field.
-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
-
-```yaml
-
-Payment:
-  x-extendedDiscriminator: type
-  type: object
-  required:
-    - type
-  properties:
-    type:
-      type: string
-    name:
-      type: string
-
-CashPayment:
-  allOf:
-    - $ref: "#/definitions/Payment"
-    - properties:
-        type:
-          type: string
-          enum:
-            - cash
-        currency:
-          type: string
-
-PayPalPayment:
-  allOf:
-    - $ref: "#/definitions/Payment"
-    - properties:
-        type:
-          type: string
-          enum:
-            - paypal
-        userEmail:
-          type: string
-```
-
-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`.
-
-#### x-additionalPropertiesName
-**ATTENTION**: This is a Redoc-specific vendor extension, and is not supported by other tools.
 
 Extends the `additionalProperties` property of the schema object.
 
@@ -343,10 +273,10 @@ Extends the `additionalProperties` property of the schema object.
 | :------------- | :------: | :---------- |
 | x-additionalPropertiesName | string | descriptive name of additional properties keys  |
 
-###### How to use with 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
+#### x-additionalPropertiesName example
 
 ```yaml
 Player:
@@ -362,8 +292,8 @@ Player:
     type: string
 ```
 
-#### x-explicitMappingOnly
+### x-explicitMappingOnly
-**ATTENTION**: This is Redoc-specific vendor extension, and is not 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.
 
@@ -371,11 +301,11 @@ Extends the `discriminator` property of the schema object.
 | :------------- | :------: | :---------- |
 | x-explicitMappingOnly | boolean | limit the discriminator selectpicker to the explicit mappings only |
 
-###### How to use with 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 lists only the explicitly defined mappings. When `false`, the default behavior is kept, in other words, explicit and implicit mappings are shown.
 
-###### x-explicitMappingOnly example
+#### x-explicitMappingOnly example
 
 
 ```yaml
@@ -393,3 +323,31 @@ Pet:
 ```
 
 Shows in the selectpicker only the items `cat` and `bee`, even though the `Dog` class inherits from the `Pet` class.
+
+### x-enumDescriptions
+| Field Name     | Type   | Description |
+| :------------- | :------: | :---------- |
+| x-enumDescriptions | [[Enum Description Object](https://redocly.com/docs/realm/author/reference/openapi-extensions/x-enum-descriptions#enum-description-object)] | A list of the enum values and descriptions to include in the documentation. |
+
+#### How to use with Redoc
+The enum (short for "enumeration") fields in OpenAPI allow you to restrict the value of a field to a list of allowed values. These values need to be short and machine-readable, but that can make them harder for humans to parse and work with.
+
+Add x-enumDescriptions to your OpenAPI description to show a helpful table of enum options and an explanation of what each one means. This field supports Markdown.
+
+#### x-enumDescriptions example
+The following example shows a schema with two short-named options, and the x-enumDescriptions entry to list all enum entries and give additional context for each:
+
+```yaml
+components:
+  schemas:
+    TicketType:
+      description: Type of ticket being purchased. Use `general` for regular museum entry and `event` for tickets to special events.
+      type: string
+      enum:
+        - event
+        - general
+      x-enumDescriptions:
+        event: Event Tickets _(timed entry)_
+        general: General Admission
+      example: event
+```

docs/security-definitions-injection.md

@@ -4,7 +4,7 @@ You can inject the Security Definitions widget anywhere in your specification `d
 
 ```markdown
 ...
-# Authorization
+## Authorization
 
 Some description
 
@@ -14,7 +14,7 @@ Some description
 The inject instruction is wrapped in an HTML comment,
 so it is **visible only in Redoc** and not visible, for instance, in the SwaggerUI.
 
-# Default behavior
+## Default behavior
 
 If the injection tag is not found in the description, it is appended to the end
 of description under the `Authentication` header.

e2e/integration/menu.e2e.ts

@@ -8,7 +8,7 @@ describe('Menu', () => {
     });
 
     it('should sync active menu items while scroll', () => {
-      cy.contains('h1', 'Introduction')
+      cy.contains('h2', 'Introduction')
         .scrollIntoView()
         .get('[role=menuitem] > label.active')
         .should('have.text', 'Introduction');
@@ -35,7 +35,7 @@ describe('Menu', () => {
 
       cy.contains('h1', 'Swagger Petstore').scrollIntoView().wait(100);
 
-      cy.contains('h1', 'Introduction')
+      cy.contains('h2', 'Introduction')
         .scrollIntoView()
         .wait(100)
         .get('[role=menuitem] > label.active')
@@ -52,6 +52,31 @@ describe('Menu', () => {
       cy.location('hash').should('equal', '#schema/Cat');
     });
 
+    it('should contains badge schema from x-badges', () => {
+      cy.contains('h2', 'Add a new pet to the store').scrollIntoView();
+
+      cy.contains('h2 > span', 'Beta')
+        .scrollIntoView()
+        .wait(100)
+        .get('[role=menuitem] > label.active')
+        .children('span[type="badge"]')
+        .should('have.text', 'Beta');
+
+      cy.contains('h2 > span', 'Alpha')
+        .scrollIntoView()
+        .wait(100)
+        .get('[role=menuitem] > label.active')
+        .children('span[type="badge"]')
+        .should('have.text', 'Alpha');
+
+      cy.contains('h2 > span', 'Gamma')
+        .scrollIntoView()
+        .wait(100)
+        .get('[role=menuitem] > label.active')
+        .children('span[type="badge"]')
+        .should('have.text', 'Gamma');
+    });
+
     it('should contains Cat schema in Pet using x-tags', () => {
       cy.contains('[role=menuitem] > label.-depth1', 'pet').click({ force: true });
       cy.location('hash').should('equal', '#tag/pet');

karma.conf.js

@@ -1,58 +0,0 @@
-module.exports = function(config) {
-  const testWebpackConfig = require('./build/webpack.test.js');
-  const travis = process.env.TRAVIS;
-
-  config.set({
-    frameworks: ['jasmine', 'sinon', 'should'],
-    preprocessors: {
-      './tests/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'],
-    },
-
-    coverageReporter: {
-      type: 'in-memory',
-    },
-
-    remapCoverageReporter: {
-      'text-summary': null,
-      'text-lcov': './coverage/lcov.info',
-      html: './coverage/html',
-    },
-    webpack: testWebpackConfig,
-    webpackMiddleware: {
-      stats: 'errors-only',
-      state: true,
-    },
-    client: {
-      chai: {
-        truncateThreshold: 0,
-      },
-    },
-    files: [
-      { pattern: './tests/spec-bundle.js', watched: false },
-      { pattern: 'tests/schemas/**/*.json', included: false },
-      { pattern: 'tests/schemas/**/*.yml', included: false },
-      { pattern: 'lib/**/*.html', included: false },
-    ],
-
-    proxies: {
-      '/tests/schemas': '/base/tests/schemas',
-      '/lib/': '/base/lib/',
-      '/node_modules/': '/base/node_modules/',
-    },
-    colors: true,
-    singleRun: true,
-    reporters: travis
-      ? ['mocha', 'coverage', 'remap-coverage', 'coveralls']
-      : ['mocha', 'coverage', 'remap-coverage'],
-
-    browsers: ['ChromeHeadlessNoSandbox'],
-    customLaunchers: {
-      ChromeHeadlessNoSandbox: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox']
-      }
-    },
-
-    browserNoActivityTimeout: 60000,
-  });
-};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.1.0",
+  "version": "2.5.0",
   "description": "ReDoc",
   "repository": {
     "type": "git",
@@ -55,20 +55,20 @@
     "build:demo": "webpack --mode=production --config demo/webpack.config.ts",
     "publish-cdn": "scripts/publish-cdn.sh",
     "deploy:demo": "aws s3 sync demo/dist s3://production-redoc-demo --acl=public-read",
-    "license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC-BY-4.0;Python-2.0' --summary",
+    "license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC-BY-4.0;CC0-1.0;Python-2.0 ' --summary",
     "docker:build": "docker build -f config/docker/Dockerfile -t redoc .",
     "prepare": "husky install",
     "pre-commit": "pretty-quick --staged && npm run lint"
   },
   "devDependencies": {
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@cypress/webpack-preprocessor": "^5.17.1",
-    "@hot-loader/react-dom": "^17.0.2",
+    "@size-limit/file": "^11.1.4",
-    "@size-limit/preset-app": "^8.2.6",
     "@types/chai": "^4.2.18",
     "@types/dompurify": "^2.2.2",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-to-json": "^1.5.3",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^29.5.6",
     "@types/json-pointer": "^1.0.30",
     "@types/lunr": "^2.3.3",
     "@types/mark.js": "^8.11.5",
@@ -76,58 +76,55 @@
     "@types/node": "^15.6.1",
     "@types/prismjs": "^1.16.5",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^17.0.8",
+    "@types/react": "^18.0.0",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^18.0.0",
-    "@types/react-tabs": "^2.3.2",
     "@types/styled-components": "^5.1.1",
     "@types/tapable": "^2.2.2",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",
     "@types/yargs": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/parser": "^5.55.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "beautify-benchmark": "^0.2.4",
     "conventional-changelog-cli": "^3.0.0",
     "copy-webpack-plugin": "^9.0.0",
     "core-js": "^3.13.1",
-    "coveralls": "^3.1.1",
     "css-loader": "^5.2.6",
-    "cypress": "^12.17.1",
+    "cypress": "^13.8.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "esbuild-loader": "^3.0.1",
+    "esbuild-loader": "^4.3.0",
     "eslint": "^7.27.0",
     "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "fork-ts-checker-webpack-plugin": "^6.2.10",
     "html-webpack-plugin": "^5.3.1",
     "husky": "^7.0.0",
-    "jest": "^27.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "js-yaml": "^4.1.0",
     "license-checker": "^25.0.1",
     "lodash.noop": "^3.0.1",
-    "mobx": "^6.3.2",
+    "mobx": "^6.10.2",
     "outdent": "^0.8.0",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.0.0",
     "raf": "^3.4.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
-    "react-hot-loader": "^4.13.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
-    "size-limit": "^8.2.6",
+    "size-limit": "^11.1.4",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.0",
-    "ts-jest": "^27.0.2",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.0",
     "unfetch": "^4.2.0",
     "url": "^0.11.1",
-    "webpack": "^5.88.2",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-node-externals": "^3.0.0",
@@ -136,31 +133,31 @@
   "peerDependencies": {
     "core-js": "^3.1.4",
     "mobx": "^6.0.4",
-    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^4.1.1 || ^5.1.1 || ^6.0.5"
   },
   "dependencies": {
-    "@redocly/openapi-core": "^1.0.0-rc.2",
+    "@redocly/openapi-core": "^1.4.0",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "decko": "^1.2.0",
-    "dompurify": "^2.2.8",
+    "dompurify": "^3.2.4",
-    "eventemitter3": "^4.0.7",
+    "eventemitter3": "^5.0.1",
     "json-pointer": "^0.6.2",
     "lunr": "^2.3.9",
     "mark.js": "^8.11.1",
-    "marked": "^4.0.15",
+    "marked": "^4.3.0",
-    "mobx-react": "^7.2.0",
+    "mobx-react": "^9.1.1",
-    "openapi-sampler": "^1.3.1",
+    "openapi-sampler": "^1.5.0",
     "path-browserify": "^1.0.1",
     "perfect-scrollbar": "^1.5.5",
-    "polished": "^4.1.3",
+    "polished": "^4.2.2",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.29.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react-tabs": "^3.2.2",
+    "react-tabs": "^6.0.2",
     "slugify": "~1.4.7",
     "stickyfill": "^1.1.1",
-    "swagger2openapi": "^7.0.6",
+    "swagger2openapi": "^7.0.8",
     "url-template": "^2.0.8"
   },
   "size-limit": [

src/common-elements/Tooltip.tsx

@@ -49,7 +49,7 @@ const Gap = styled.div`
   bottom: -20px;
 `;
 
-export interface TooltipProps {
+export interface TooltipProps extends React.PropsWithChildren<any> {
   open: boolean;
   title: string;
 }

src/common-elements/fields.ts

@@ -1,10 +1,17 @@
 import { transparentize } from 'polished';
 
-import styled, { extensionsHook, css } from '../styled-components';
+import styled, { css, extensionsHook } from '../styled-components';
 import { PropertyNameCell } from './fields-layout';
+import { deprecatedCss } from './mixins';
 import { ShelfIcon } from './shelfs';
 
 export const ClickablePropertyNameCell = styled(PropertyNameCell)`
+  &.deprecated {
+    span.property-name {
+      ${deprecatedCss}
+    }
+  }
+
   button {
     background-color: transparent;
     border: 0;
@@ -90,9 +97,11 @@ export const RecursiveLabel = styled(FieldLabel)`
 
 export const PatternLabel = styled(FieldLabel)`
   color: #0e7c86;
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: 12px;
   &::before,
   &::after {
-    font-weight: bold;
+    content: ' ';
   }
 `;
 

src/common-elements/panels.ts

@@ -1,14 +1,14 @@
 import { SECTION_ATTR } from '../services/MenuStore';
 import styled, { media } from '../styled-components';
 
-export const MiddlePanel = styled.div<{ compact?: boolean }>`
+export const MiddlePanel = styled.div<{ $compact?: boolean }>`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
-  ${({ compact, theme }) =>
+  ${({ $compact, theme }) =>
     media.lessThan('medium', true)`
     width: 100%;
-    padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
+    padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${
       theme.spacing.sectionHorizontal
     }px`};
   `};
@@ -16,7 +16,7 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>`
 
 export const Section = styled.div.attrs(props => ({
   [SECTION_ATTR]: props.id,
-}))<{ underlined?: boolean }>`
+}))<{ $underlined?: boolean }>`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
   &:last-child {
@@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({
   ${media.lessThan('medium', true)`
     padding: 0;
   `}
-  ${(props: any) =>
+  ${({ $underlined }) =>
-    (props.underlined &&
+    ($underlined &&
       `
     position: relative;
 

src/common-elements/perfect-scrollbar.tsx

@@ -33,7 +33,9 @@ export interface PerfectScrollbarProps {
   updateFn?: (fn) => void;
 }
 
-export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
+export class PerfectScrollbar extends React.Component<
+  React.PropsWithChildren<PerfectScrollbarProps>
+> {
   private _container: HTMLElement;
   private inst: PerfectScrollbarType;
 

src/common-elements/schema.ts

@@ -15,7 +15,7 @@ export const OneOfLabel = styled.span`
 }
 `;
 
-export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean }>`
+export const OneOfButton = styled.button<{ $active: boolean; $deprecated: boolean }>`
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 5px;
@@ -29,10 +29,10 @@ export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean
     box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
   }
 
-  ${({ deprecated }) => (deprecated && deprecatedCss) || ''};
+  ${({ $deprecated }) => ($deprecated && deprecatedCss) || ''};
 
   ${props => {
-    if (props.active) {
+    if (props.$active) {
       return `
       color: white;
       background-color: ${props.theme.colors.primary.main};

src/common-elements/shelfs.tsx

@@ -47,11 +47,11 @@ export const ShelfIcon = styled(IntShelfIcon)`
   }
 `;
 
-export const Badge = styled.span<{ type: string }>`
+export const Badge = styled.span<{ type: string; color?: string }>`
   display: inline-block;
   padding: 2px 8px;
   margin: 0;
-  background-color: ${props => props.theme.colors[props.type].main};
+  background-color: ${props => props.color || props.theme.colors[props.type].main};
   color: ${props => props.theme.colors[props.type].contrastText};
   font-size: ${props => props.theme.typography.code.fontSize};
   vertical-align: middle;

src/components/ApiInfo/ApiInfo.tsx

@@ -22,20 +22,13 @@ export interface ApiInfoProps {
 
 @observer
 export class ApiInfo extends React.Component<ApiInfoProps> {
-  handleDownloadClick = e => {
-    if (!e.target.href) {
-      e.target.href = this.props.store.spec.info.downloadLink;
-    }
-  };
-
   render() {
     const { store } = this.props;
     const { info, externalDocs } = store.spec;
-    const hideDownloadButton = store.options.hideDownloadButton;
+    const hideDownloadButtons = store.options.hideDownloadButtons;
-
-    const downloadFilename = info.downloadFileName;
-    const downloadLink = info.downloadLink;
 
+    const downloadUrls = info.downloadUrls;
+    const downloadFileName = info.downloadFileName;
     const license =
       (info.license && (
         <InfoSpan>
@@ -83,17 +76,22 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
             <ApiHeader>
               {info.title} {version}
             </ApiHeader>
-            {!hideDownloadButton && (
+            {!hideDownloadButtons && (
               <p>
                 {l('downloadSpecification')}:
+                {downloadUrls?.map(({ title, url }) => {
+                  return (
                     <DownloadButton
-                  download={downloadFilename || true}
+                      download={downloadFileName || true}
                       target="_blank"
-                  href={downloadLink}
+                      href={url}
-                  onClick={this.handleDownloadClick}
+                      rel="noreferrer"
+                      key={url}
                     >
-                  {l('download')}
+                      {title}
                     </DownloadButton>
+                  );
+                })}
               </p>
             )}
             <StyledMarkdownBlock>

src/components/Callbacks/CallbackTitle.tsx

@@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
     <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
       <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
       <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
-      <CallbackName deprecated={deprecated}>{name}</CallbackName>
+      <CallbackName $deprecated={deprecated}>{name}</CallbackName>
       {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
     </CallbackTitleWrapper>
   );
@@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button`
   }
 `;
 
-const CallbackName = styled.span<{ deprecated?: boolean }>`
+const CallbackName = styled.span<{ $deprecated?: boolean }>`
-  text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
+  text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')};
   margin-right: 8px;
 `;
 

src/components/ContentItems/ContentItems.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { AdvancedMarkdown } from '../Markdown/AdvancedMarkdown';
-import { H1, H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
+import { H2, H3, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
 import type { ContentItemModel } from '../../services';
 import type { GroupModel, OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
@@ -51,7 +51,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
     return (
       <>
         {content && (
-          <Section id={item.id} underlined={item.type === 'operation'}>
+          <Section id={item.id} $underlined={item.type === 'operation'}>
             {content}
           </Section>
         )}
@@ -61,18 +61,18 @@ export class ContentItem extends React.Component<ContentItemProps> {
   }
 }
 
-const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
+const middlePanelWrap = component => <MiddlePanel $compact={true}>{component}</MiddlePanel>;
 
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
     const { name, description, externalDocs, level } = this.props.item as GroupModel;
 
-    const Header = level === 2 ? H2 : H1;
+    const Header = level === 2 ? H3 : H2;
     return (
       <>
         <Row>
-          <MiddlePanel compact={false}>
+          <MiddlePanel $compact={false}>
             <Header>
               <ShareLink to={this.props.item.id} />
               {name}

src/components/Endpoint/Endpoint.tsx

@@ -49,8 +49,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
       <OptionsContext.Consumer>
         {options => (
           <OperationEndpointWrap>
-            <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
+            <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
-              <HttpVerb type={operation.httpVerb} compact={this.props.compact}>
+              <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
                 {operation.httpVerb}
               </HttpVerb>
               <ServerRelativeURL>{operation.path}</ServerRelativeURL>
@@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                 style={{ marginRight: '-25px' }}
               />
             </EndpointInfo>
-            <ServersOverlay expanded={expanded} aria-hidden={!expanded}>
+            <ServersOverlay $expanded={expanded} aria-hidden={!expanded}>
               {operation.servers.map(server => {
                 const normalizedUrl = options.expandDefaultServerVariables
                   ? expandDefaultServerVariables(server.url, server.variables)

src/components/Endpoint/styled.elements.ts

@@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span`
   text-overflow: ellipsis;
 `;
 
-export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
+export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>`
   outline: 0;
   color: inherit;
   width: 100%;
   text-align: left;
   cursor: pointer;
-  padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
+  padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
-  border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
+  border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
   background-color: ${props =>
-    props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
+    props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
   display: flex;
   white-space: nowrap;
   align-items: center;
-  border: ${props => (props.inverted ? '0' : '1px solid transparent')};
+  border: ${props => (props.$inverted ? '0' : '1px solid transparent')};
-  border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
+  border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;
 
   ${props =>
-    (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
+    (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
+    ''}
 
   .${ServerRelativeURL} {
-    color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
+    color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
   }
   &:focus {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
   }
 `;
 
-export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
+export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
   className: `http-verb ${props.type}`,
-}))<{ type: string; compact?: boolean }>`
+}))<{ type: string; $compact?: boolean }>`
-  font-size: ${props => (props.compact ? '0.8em' : '0.929em')};
+  font-size: ${props => (props.$compact ? '0.8em' : '0.929em')};
-  line-height: ${props => (props.compact ? '18px' : '20px')};
+  line-height: ${props => (props.$compact ? '18px' : '20px')};
   background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
   color: #ffffff;
-  padding: ${props => (props.compact ? '2px 8px' : '3px 10px')};
+  padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')};
   text-transform: uppercase;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   margin: 0;
 `;
 
-export const ServersOverlay = styled.div<{ expanded: boolean }>`
+export const ServersOverlay = styled.div<{ $expanded: boolean }>`
   position: absolute;
   width: 100%;
   z-index: 100;
   background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor};
   color: ${props => props.theme.rightPanel.servers.overlay.textColor};
   box-sizing: border-box;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
   overflow: hidden;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   transition: all 0.25s ease;
   visibility: hidden;
-  ${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
+  ${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
 `;
 
 export const ServerItem = styled.div`

src/components/ExternalDocumentation/ExternalDocumentation.tsx

@@ -4,9 +4,9 @@ import styled from '../../styled-components';
 import { OpenAPIExternalDocumentation } from '../../types';
 import { linksCss } from '../Markdown/styled.elements';
 
-const LinkWrap = styled.div<{ compact?: boolean }>`
+const LinkWrap = styled.div<{ $compact?: boolean }>`
   ${linksCss};
-  ${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
+  ${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')}
 `;
 
 @observer
@@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{
     }
 
     return (
-      <LinkWrap compact={this.props.compact}>
+      <LinkWrap $compact={this.props.compact}>
         <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
       </LinkWrap>
     );

src/components/Fields/ArrayItemDetails.tsx

@@ -10,11 +10,10 @@ export function ArrayItemDetails({ schema }: { schema: SchemaModel }) {
   const { hideSchemaPattern } = React.useContext(OptionsContext);
   if (
     !schema ||
-    (schema.type === 'string' && !schema.constraints.length) ||
     ((!schema?.pattern || hideSchemaPattern) &&
       !schema.items &&
       !schema.displayFormat &&
-      !schema.constraints.length) // return null for cases where all constraints are empty
+      !schema.constraints?.length) // return null for cases where all constraints are empty
   ) {
     return null;
   }

src/components/Fields/EnumValues.tsx

@@ -5,17 +5,29 @@ import { l } from '../../services/Labels';
 import { OptionsContext } from '../OptionsProvider';
 import styled from '../../styled-components';
 import { RedocRawOptions } from '../../services/RedocNormalizedOptions';
+import { StyledMarkdownBlock } from '../Markdown/styled.elements';
+import { Markdown } from '../Markdown/Markdown';
 
 export interface EnumValuesProps {
-  values: string[];
+  values?: string[] | { [name: string]: string };
-  isArrayType: boolean;
+  type: string | string[];
 }
 
 export interface EnumValuesState {
   collapsed: boolean;
 }
 
+const DescriptionEnumsBlock = styled(StyledMarkdownBlock)`
+  table {
+    margin-bottom: 0.2em;
+  }
+`;
+
 export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesState> {
+  constructor(props: EnumValuesProps) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+  }
   state: EnumValuesState = {
     collapsed: true,
   };
@@ -27,35 +39,79 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
   }
 
   render() {
-    const { values, isArrayType } = this.props;
+    const { values, type } = this.props;
     const { collapsed } = this.state;
+    const isDescriptionEnum = !Array.isArray(values);
+    const enums =
+      (Array.isArray(values) && values) ||
+      Object.entries(values || {}).map(([value, description]) => ({
+        value,
+        description,
+      }));
 
     // TODO: provide context interface in more elegant way
     const { enumSkipQuotes, maxDisplayedEnumValues } = this.context as RedocRawOptions;
 
-    if (!values.length) {
+    if (!enums.length) {
       return null;
     }
 
     const displayedItems =
       this.state.collapsed && maxDisplayedEnumValues
-        ? values.slice(0, maxDisplayedEnumValues)
+        ? enums.slice(0, maxDisplayedEnumValues)
-        : values;
+        : enums;
 
-    const showToggleButton = maxDisplayedEnumValues
+    const showToggleButton = maxDisplayedEnumValues ? enums.length > maxDisplayedEnumValues : false;
-      ? values.length > maxDisplayedEnumValues
-      : false;
 
     const toggleButtonText = maxDisplayedEnumValues
       ? collapsed
-        ? `… ${values.length - maxDisplayedEnumValues} more`
+        ? `… ${enums.length - maxDisplayedEnumValues} more`
         : 'Hide'
       : '';
 
     return (
       <div>
+        {isDescriptionEnum ? (
+          <>
+            <DescriptionEnumsBlock>
+              <table>
+                <thead>
+                  <tr>
+                    <th>
                       <FieldLabel>
-          {isArrayType ? l('enumArray') : ''}{' '}
+                        {type === 'array' ? l('enumArray') : ''}{' '}
+                        {enums.length === 1 ? l('enumSingleValue') : l('enum')}
+                      </FieldLabel>{' '}
+                    </th>
+                    <th>
+                      <strong>Description</strong>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(displayedItems as { value: string; description: string }[]).map(
+                    ({ description, value }) => {
+                      return (
+                        <tr key={value}>
+                          <td>{value}</td>
+                          <td>
+                            <Markdown source={description} compact inline />
+                          </td>
+                        </tr>
+                      );
+                    },
+                  )}
+                </tbody>
+              </table>
+            </DescriptionEnumsBlock>
+            {showToggleButton ? (
+              <ToggleButton onClick={this.toggle}>{toggleButtonText}</ToggleButton>
+            ) : null}
+          </>
+        ) : (
+          <>
+            <FieldLabel>
+              {type === 'array' ? l('enumArray') : ''}{' '}
               {values.length === 1 ? l('enumSingleValue') : l('enum')}:
             </FieldLabel>{' '}
             {displayedItems.map((value, idx) => {
@@ -67,14 +123,10 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
               );
             })}
             {showToggleButton ? (
-          <ToggleButton
+              <ToggleButton onClick={this.toggle}>{toggleButtonText}</ToggleButton>
-            onClick={() => {
-              this.toggle();
-            }}
-          >
-            {toggleButtonText}
-          </ToggleButton>
             ) : null}
+          </>
+        )}
       </div>
     );
   }

src/components/Fields/Field.tsx

@@ -19,6 +19,8 @@ import { Schema } from '../Schema/Schema';
 
 import type { SchemaOptions } from '../Schema/Schema';
 import type { FieldModel } from '../../services/models';
+import { OptionsContext } from '../OptionsProvider';
+import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
 
 export interface FieldProps extends SchemaOptions {
   className?: string;
@@ -27,12 +29,15 @@ export interface FieldProps extends SchemaOptions {
 
   field: FieldModel;
   expandByDefault?: boolean;
-
+  fieldParentsName?: string[];
   renderDiscriminatorSwitch?: (opts: FieldProps) => JSX.Element;
 }
 
 @observer
 export class Field extends React.Component<FieldProps> {
+  static contextType = OptionsContext;
+  context: RedocNormalizedOptions;
+
   toggle = () => {
     if (this.props.field.expanded === undefined && this.props.expandByDefault) {
       this.props.field.collapse();
@@ -49,12 +54,12 @@ export class Field extends React.Component<FieldProps> {
   };
 
   render() {
-    const { className = '', field, isLast, expandByDefault } = this.props;
+    const { hidePropertiesPrefix } = this.context;
+    const { className = '', field, isLast, expandByDefault, fieldParentsName = [] } = this.props;
     const { name, deprecated, required, kind } = field;
     const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
 
     const expanded = field.expanded === undefined ? expandByDefault : field.expanded;
-
     const labels = (
       <>
         {kind === 'additionalProperties' && <PropertyLabel>additional property</PropertyLabel>}
@@ -75,6 +80,10 @@ export class Field extends React.Component<FieldProps> {
           onKeyPress={this.handleKeyPress}
           aria-label={`expand ${name}`}
         >
+          {!hidePropertiesPrefix &&
+            fieldParentsName.map(
+              name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+            )}
           <span className="property-name">{name}</span>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
@@ -83,6 +92,10 @@ export class Field extends React.Component<FieldProps> {
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
         <PropertyBullet />
+        {!hidePropertiesPrefix &&
+          fieldParentsName.map(
+            name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+          )}
         <span className="property-name">{name}</span>
         {labels}
       </PropertyNameCell>
@@ -102,6 +115,7 @@ export class Field extends React.Component<FieldProps> {
               <InnerPropertiesWrap>
                 <Schema
                   schema={field.schema}
+                  fieldParentsName={[...(fieldParentsName || []), field.name]}
                   skipReadOnly={this.props.skipReadOnly}
                   skipWriteOnly={this.props.skipWriteOnly}
                   showTitle={this.props.showTitle}

src/components/Fields/FieldDetails.tsx

@@ -8,7 +8,7 @@ import {
   TypePrefix,
   TypeTitle,
 } from '../../common-elements/fields';
-import { getSerializedValue, isObject } from '../../utils';
+import { getSerializedValue, isArray, isObject } from '../../utils';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
@@ -30,7 +30,8 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
 
   const { showExamples, field, renderDiscriminatorSwitch } = props;
   const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
-  const isArrayType = schema.type === 'array';
+  const isArrayType =
+    schema.type === 'array' || (isArray(schema.type) && schema.type.includes('array'));
 
   const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate
 
@@ -51,8 +52,8 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
 
     return null;
   }, [field, showExamples]);
-
+  const defaultValue =
-  const defaultValue = isObject(schema.default)
+    isObject(schema.default) && field.in
       ? getSerializedValue(field, schema.default).replace(`${field.name}=`, '')
       : schema.default;
 
@@ -98,7 +99,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
       )}
       <FieldDetail raw={rawDefault} label={l('default') + ':'} value={defaultValue} />
       {!renderDiscriminatorSwitch && (
-        <EnumValues isArrayType={isArrayType} values={schema.enum} />
+        <EnumValues type={schema.type} values={schema['x-enumDescriptions'] || schema.enum} />
       )}{' '}
       {renderedExamples}
       <Extensions extensions={{ ...extensions, ...schema.extensions }} />

src/components/JsonViewer/JsonViewer.tsx

@@ -41,11 +41,12 @@ const Json = (props: JsonProps) => {
         <OptionsContext.Consumer>
           {options => (
             <PrismDiv
+              tabIndex={0}
               className={props.className}
               // tslint:disable-next-line
               ref={node => setNode(node!)}
               dangerouslySetInnerHTML={{
-                __html: jsonToHTML(props.data, options.jsonSampleExpandLevel),
+                __html: jsonToHTML(props.data, options.jsonSamplesExpandLevel),
               }}
             />
           )}

src/components/Markdown/SanitizedMdBlock.tsx

@@ -6,27 +6,34 @@ import { StylingMarkdownProps } from './Markdown';
 import { StyledMarkdownBlock } from './styled.elements';
 import styled from 'styled-components';
 
+// Workaround for DOMPurify type issues (https://github.com/cure53/DOMPurify/issues/1034)
+const dompurify = DOMPurify['default'] as DOMPurify.DOMPurify;
+
 const StyledMarkdownSpan = styled(StyledMarkdownBlock)`
   display: inline;
 `;
 
-const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
+const sanitize = (sanitize, html) => (sanitize ? dompurify.sanitize(html) : html);
 
-export function SanitizedMarkdownHTML(
+export function SanitizedMarkdownHTML({
-  props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string },
+  inline,
-) {
+  compact,
-  const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
+  ...rest
+}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) {
+  const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock;
 
   return (
     <OptionsConsumer>
       {options => (
         <Wrap
-          className={'redoc-markdown ' + (props.className || '')}
+          className={'redoc-markdown ' + (rest.className || '')}
           dangerouslySetInnerHTML={{
-            __html: sanitize(options.untrustedSpec, props.html),
+            __html: sanitize(options.sanitize, rest.html),
           }}
-          data-role={props['data-role']}
+          data-role={rest['data-role']}
-          {...props}
+          {...rest}
+          $inline={inline}
+          $compact={compact}
         />
       )}
     </OptionsConsumer>

src/components/Markdown/styled.elements.tsx

@@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled(
   PrismDiv as StyledComponent<
     'div',
     ResolvedThemeInterface,
-    { compact?: boolean; inline?: boolean }
+    { $compact?: boolean; $inline?: boolean }
   >,
 )`
   font-family: ${props => props.theme.typography.fontFamily};
@@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
     }
   }
 
-  ${({ compact }) =>
+  ${({ $compact }) =>
-    compact &&
+    $compact &&
     `
     p:first-child {
       margin-top: 0;
@@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
     }
   `}
 
-  ${({ inline }) =>
+  ${({ $inline }) =>
-    inline &&
+    $inline &&
     ` p {
     display: inline-block;
   }`}
@@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled(
     padding: ${props => props.theme.spacing.unit * 4}px;
     overflow-x: auto;
     line-height: normal;
-    border-radius: 0px;
+    border-radius: 0;
     border: 1px solid rgba(38, 50, 56, 0.1);
 
     code {

src/components/Operation/Operation.tsx

@@ -28,9 +28,20 @@ export interface OperationProps {
 }
 
 export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
-  const { name: summary, description, deprecated, externalDocs, isWebhook, httpVerb } = operation;
+  const {
+    name: summary,
+    description,
+    deprecated,
+    externalDocs,
+    isWebhook,
+    httpVerb,
+    badges,
+  } = operation;
   const hasDescription = !!(description || externalDocs);
   const { showWebhookVerb } = React.useContext(OptionsContext);
+  const badgesBefore = badges.filter(({ position }) => position === 'before');
+  const badgesAfter = badges.filter(({ position }) => position === 'after');
+
   return (
     <OptionsContext.Consumer>
       {options => (
@@ -38,6 +49,11 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
           <MiddlePanel>
             <H2>
               <ShareLink to={operation.id} />
+              {badgesBefore.map(({ name, color }) => (
+                <Badge type="primary" key={name} color={color}>
+                  {name}
+                </Badge>
+              ))}
               {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               {isWebhook && (
                 <Badge type="primary">
@@ -45,6 +61,11 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
                   Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()}
                 </Badge>
               )}
+              {badgesAfter.map(({ name, color }) => (
+                <Badge type="primary" key={name} color={color}>
+                  {name}
+                </Badge>
+              ))}
             </H2>
             {options.pathInMiddlePanel && !isWebhook && (
               <Endpoint operation={operation} inverted={true} />

src/components/Schema/ArraySchema.tsx

@@ -16,14 +16,24 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
   render() {
     const schema = this.props.schema;
     const itemsSchema = schema.items;
+    const fieldParentsName = this.props.fieldParentsName;
 
     const minMaxItems =
       schema.minItems === undefined && schema.maxItems === undefined
         ? ''
         : `(${humanizeConstraints(schema)})`;
 
+    const updatedParentsArray = fieldParentsName
+      ? [...fieldParentsName.slice(0, -1), fieldParentsName[fieldParentsName.length - 1] + '[]']
+      : fieldParentsName;
     if (schema.fields) {
-      return <ObjectSchema {...(this.props as any)} level={this.props.level} />;
+      return (
+        <ObjectSchema
+          {...(this.props as any)}
+          level={this.props.level}
+          fieldParentsName={updatedParentsArray}
+        />
+      );
     }
     if (schema.displayType && !itemsSchema && !minMaxItems.length) {
       return (
@@ -37,7 +47,7 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
       <div>
         <ArrayOpenningLabel> Array {minMaxItems}</ArrayOpenningLabel>
         <PaddedSchema>
-          <Schema {...this.props} schema={itemsSchema} />
+          <Schema {...this.props} schema={itemsSchema} fieldParentsName={updatedParentsArray} />
         </PaddedSchema>
         <ArrayClosingLabel />
       </div>

src/components/Schema/ObjectSchema.tsx

@@ -16,6 +16,7 @@ export interface ObjectSchemaProps extends SchemaProps {
     fieldName: string;
     parentSchema: SchemaModel;
   };
+  fieldParentsName?: string[];
 }
 
 export const ObjectSchema = observer(
@@ -26,8 +27,9 @@ export const ObjectSchema = observer(
     skipReadOnly,
     skipWriteOnly,
     level,
+    fieldParentsName,
   }: ObjectSchemaProps) => {
-    const { expandSingleSchemaField, showObjectSchemaExamples, schemaExpansionLevel } =
+    const { expandSingleSchemaField, showObjectSchemaExamples, schemasExpansionLevel } =
       React.useContext(OptionsContext);
 
     const filteredFields = React.useMemo(
@@ -45,7 +47,7 @@ export const ObjectSchema = observer(
     );
 
     const expandByDefault =
-      (expandSingleSchemaField && filteredFields.length === 1) || schemaExpansionLevel >= level!;
+      (expandSingleSchemaField && filteredFields.length === 1) || schemasExpansionLevel >= level!;
 
     return (
       <PropertiesTable>
@@ -58,6 +60,7 @@ export const ObjectSchema = observer(
                 isLast={isLast}
                 field={field}
                 expandByDefault={expandByDefault}
+                fieldParentsName={Number(level) > 1 ? fieldParentsName : []}
                 renderDiscriminatorSwitch={
                   discriminator?.fieldName === field.name
                     ? () => (

src/components/Schema/OneOfSchema.tsx

@@ -23,8 +23,8 @@ export class OneOfButton extends React.Component<OneOfButtonProps> {
     const { idx, schema, subSchema } = this.props;
     return (
       <StyledOneOfButton
-        deprecated={subSchema.deprecated}
+        $deprecated={subSchema.deprecated}
-        active={idx === schema.activeOneOf}
+        $active={idx === schema.activeOneOf}
         onClick={this.activateOneOf}
       >
         {subSchema.title || subSchema.typePrefix + subSchema.displayType}

src/components/Schema/Schema.tsx

@@ -21,6 +21,7 @@ export interface SchemaOptions {
 
 export interface SchemaProps extends SchemaOptions {
   schema: SchemaModel;
+  fieldParentsName?: string[];
 }
 
 @observer

src/components/SearchBox/SearchBox.tsx

@@ -37,6 +37,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
   activeItemRef: MenuItem | null = null;
 
   static contextType = OptionsContext;
+  declare context: React.ContextType<typeof OptionsContext>;
 
   constructor(props) {
     super(props);

src/components/SecurityRequirement/OAuthFlow.tsx

@@ -39,7 +39,7 @@ export function OAuthFlowComponent(props: OAuthFlowProps) {
       {flow!.refreshUrl && (
         <SecurityRow>
           <strong> Refresh URL: </strong>
-          {flow!.refreshUrl}
+          <code>{flow!.refreshUrl}</code>
         </SecurityRow>
       )}
       {!!scopesNames.length && (

src/components/SecurityRequirement/SecurityHeader.tsx

@@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) {
 
   const grouping = security.schemes.length > 1;
   if (security.schemes.length === 0)
-    return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>;
+    return <SecurityRequirementOrWrap $expanded={expanded}>None</SecurityRequirementOrWrap>;
   return (
-    <SecurityRequirementOrWrap expanded={expanded}>
+    <SecurityRequirementOrWrap $expanded={expanded}>
       {grouping && '('}
       {security.schemes.map(scheme => {
         return (

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -37,12 +37,12 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
 
   return (
     <>
-      <Wrap expanded={expanded}>
+      <Wrap $expanded={expanded}>
         <AuthHeaderColumn onClick={() => setExpanded(!expanded)}>
           <AuthHeader>Authorizations:</AuthHeader>
           <ShelfIcon size={'1.3em'} direction={expanded ? 'down' : 'right'} />
         </AuthHeaderColumn>
-        <SecuritiesColumn expanded={expanded}>
+        <SecuritiesColumn $expanded={expanded}>
           {securities.map((security, idx) => (
             <SecurityHeader
               key={idx}
@@ -54,7 +54,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
         </SecuritiesColumn>
       </Wrap>
       {expanded &&
-        operationSecuritySchemes?.length &&
+        !!operationSecuritySchemes?.length &&
         operationSecuritySchemes.map((scheme, idx) => (
           <SecurityDetailsStyle key={idx}>
             <h5>

src/components/SecurityRequirement/styled.elements.ts

@@ -55,11 +55,11 @@ export const SecurityRequirementAndWrap = styled.span`
   ${linksCss};
 `;
 
-export const SecurityRequirementOrWrap = styled.span<{ expanded?: boolean }>`
+export const SecurityRequirementOrWrap = styled.span<{ $expanded?: boolean }>`
-  ${p => !p.expanded && `white-space: nowrap;`}
+  ${p => !p.$expanded && `white-space: nowrap;`}
   &:after {
     content: ' or ';
-    ${p => p.expanded && `content: ' or \\a';`}
+    ${p => p.$expanded && `content: ' or \\a';`}
     white-space: pre;
   }
 
@@ -76,13 +76,13 @@ export const AuthHeaderColumn = styled.div`
   cursor: pointer;
 `;
 
-export const SecuritiesColumn = styled.div<{ expanded?: boolean }>`
+export const SecuritiesColumn = styled.div<{ $expanded?: boolean }>`
   width: ${props => props.theme.schema.defaultDetailsWidth};
   text-overflow: ellipsis;
   border-radius: 4px;
   overflow: hidden;
   ${p =>
-    p.expanded &&
+    p.$expanded &&
     `background: ${p.theme.colors.gray['100']};
      padding: 8px 9.6px;
      margin: 20px 0;
@@ -98,11 +98,11 @@ export const AuthHeader = styled(UnderlinedHeader)`
   margin: 0;
 `;
 
-export const Wrap = styled.div<{ expanded?: boolean }>`
+export const Wrap = styled.div<{ $expanded?: boolean }>`
   width: 100%;
   display: flex;
   margin: 1em 0;
-  flex-direction: ${p => (p.expanded ? 'column' : 'row')};
+  flex-direction: ${p => (p.$expanded ? 'column' : 'row')};
   ${media.lessThan('small')`
     flex-direction: column;
   `}

src/components/SeeMore/SeeMore.tsx

@@ -32,7 +32,7 @@ export function SeeMore({ children, height }: SeeMoreProps): JSX.Element {
       >
         {children}
       </Container>
-      <ButtonContainer dimmed={!showMore}>
+      <ButtonContainer $dimmed={!showMore}>
         {showLink && (
           <ButtonLinkStyled onClick={onClickMore}>
             {showMore ? 'See less' : 'See more'}
@@ -47,11 +47,11 @@ const Container = styled.div`
   overflow-y: hidden;
 `;
 
-const ButtonContainer = styled.div<{ dimmed?: boolean }>`
+const ButtonContainer = styled.div<{ $dimmed?: boolean }>`
   text-align: center;
   line-height: 1.5em;
-  ${({ dimmed }) =>
+  ${({ $dimmed }) =>
-    dimmed &&
+    $dimmed &&
     `background-image: linear-gradient(to bottom, transparent,rgb(255 255 255));
      position: relative;
      top: -0.5em;

src/components/SelectOnClick/SelectOnClick.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ClipboardService } from '../../services';
 
-export class SelectOnClick extends React.PureComponent {
+export class SelectOnClick extends React.PureComponent<React.PropsWithChildren<any>> {
   private child: HTMLDivElement | null;
   selectElement = () => {
     ClipboardService.selectElement(this.child);

src/components/SideMenu/MenuItem.tsx

@@ -2,14 +2,14 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { ShelfIcon } from '../../common-elements/shelfs';
+import type { IMenuItem } from '../../services';
 import { OperationModel } from '../../services';
-import { shortenHTTPVerb } from '../../utils/openapi';
-import { MenuItems } from './MenuItems';
-import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
 import { l } from '../../services/Labels';
 import { scrollIntoViewIfNeeded } from '../../utils';
+import { shortenHTTPVerb } from '../../utils/openapi';
 import { OptionsContext } from '../OptionsProvider';
-import type { IMenuItem } from '../../services';
+import { MenuItems } from './MenuItems';
+import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
 
 export interface MenuItemProps {
   item: IMenuItem;
@@ -47,14 +47,23 @@ export class MenuItem extends React.Component<MenuItemProps> {
       <MenuItemLi
         tabIndex={0}
         onClick={this.activate}
+        onKeyDown={evt => {
+          // Space or Enter key will activate the menu item
+          if (evt.key === 'Enter' || evt.key === ' ') {
+            this.props.onActivate!(this.props.item);
+            evt.stopPropagation();
+          }
+        }}
         depth={item.depth}
         data-item-id={item.id}
         role="menuitem"
+        aria-label={item.sidebarLabel}
+        aria-expanded={item.expanded}
       >
         {item.type === 'operation' ? (
           <OperationMenuItemContent {...this.props} item={item as OperationModel} />
         ) : (
-          <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
+          <MenuItemLabel $depth={item.depth} $active={item.active} $type={item.type} ref={this.ref}>
             {item.type === 'schema' && <OperationBadge type="schema">schema</OperationBadge>}
             <MenuItemTitle width="calc(100% - 38px)" title={item.sidebarLabel}>
               {item.sidebarLabel}
@@ -95,7 +104,18 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten
   }, [props.item.active, ref]);
 
   return (
-    <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={ref}>
+    <MenuItemLabel
+      $depth={item.depth}
+      $active={item.active}
+      $deprecated={item.deprecated}
+      ref={ref}
+    >
+      {item.badges &&
+        item.badges?.map(({ name, color }) => (
+          <OperationBadge type="badge" color={color} key={name}>
+            {name}
+          </OperationBadge>
+        ))}
       {item.isWebhook ? (
         <OperationBadge type="hook">
           {showWebhookVerb ? item.httpVerb : l('webhook')}

src/components/SideMenu/MenuItems.tsx

@@ -25,7 +25,7 @@ export class MenuItems extends React.Component<MenuItemsProps> {
       <MenuItemUl
         className={className}
         style={this.props.style}
-        expanded={expanded}
+        $expanded={expanded}
         {...(root ? { role: 'menu' } : {})}
       >
         {items.map((item, idx) => (

src/components/SideMenu/SideMenu.tsx

@@ -13,6 +13,7 @@ import RedoclyLogo from './Logo';
 @observer
 export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
   static contextType = OptionsContext;
+  declare context: React.ContextType<typeof OptionsContext>;
   private _updateScroll?: () => void;
 
   render() {

src/components/SideMenu/styled.elements.ts

@@ -1,17 +1,17 @@
-import { default as classnames } from 'classnames';
+import * as classnames from 'classnames';
 import { darken } from 'polished';
 
 import { deprecatedCss, ShelfIcon } from '../../common-elements';
 import styled, { css, media, ResolvedThemeInterface } from '../../styled-components';
 
-export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
+export const OperationBadge = styled.span.attrs((props: { type: string; color?: string }) => ({
   className: `operation-type ${props.type}`,
-}))<{ type: string }>`
+}))<{ type: string; color?: string }>`
   width: 9ex;
   display: inline-block;
   height: ${props => props.theme.typography.code.fontSize};
   line-height: ${props => props.theme.typography.code.fontSize};
-  background-color: #333;
+  background-color: ${props => props.color || '#333'};
   border-radius: 3px;
   background-repeat: no-repeat;
   background-position: 6px 4px;
@@ -84,7 +84,7 @@ function menuItemActive(
   }
 }
 
-export const MenuItemUl = styled.ul<{ expanded: boolean }>`
+export const MenuItemUl = styled.ul<{ $expanded: boolean }>`
   margin: 0;
   padding: 0;
 
@@ -96,7 +96,7 @@ export const MenuItemUl = styled.ul<{ expanded: boolean }>`
     font-size: 0.929em;
   }
 
-  ${props => (props.expanded ? '' : 'display: none;')};
+  ${props => (props.$expanded ? '' : 'display: none;')};
 `;
 
 export const MenuItemLi = styled.li<{ depth: number }>`
@@ -122,40 +122,40 @@ export const menuItemDepth = {
 };
 
 export interface MenuItemLabelType {
-  depth: number;
+  $depth: number;
-  active: boolean;
+  $active: boolean;
-  deprecated?: boolean;
+  $deprecated?: boolean;
-  type?: string;
+  $type?: string;
 }
 
 export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
-  className: classnames('-depth' + props.depth, {
+  className: classnames('-depth' + props.$depth, {
-    active: props.active,
+    active: props.$active,
   }),
 }))<MenuItemLabelType>`
   cursor: pointer;
   color: ${props =>
-    props.active
+    props.$active
-      ? menuItemActive(props.depth, props, 'activeTextColor')
+      ? menuItemActive(props.$depth, props, 'activeTextColor')
       : props.theme.sidebar.textColor};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
-  ${({ depth, type, theme }) =>
+  ${({ $depth, $type, theme }) =>
-    (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
+    ($type === 'section' && $depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
   display: flex;
   justify-content: space-between;
   font-family: ${props => props.theme.typography.headings.fontFamily};
-  ${props => menuItemDepth[props.depth]};
+  ${props => menuItemDepth[props.$depth]};
   background-color: ${props =>
-    props.active
+    props.$active
-      ? menuItemActive(props.depth, props, 'activeBackgroundColor')
+      ? menuItemActive(props.$depth, props, 'activeBackgroundColor')
       : props.theme.sidebar.backgroundColor};
 
-  ${props => (props.deprecated && deprecatedCss) || ''};
+  ${props => (props.$deprecated && deprecatedCss) || ''};
 
   &:hover {
-    color: ${props => menuItemActive(props.depth, props, 'activeTextColor')};
+    color: ${props => menuItemActive(props.$depth, props, 'activeTextColor')};
-    background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')};
+    background-color: ${props => menuItemActive(props.$depth, props, 'activeBackgroundColor')};
   }
 
   ${ShelfIcon} {

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -25,7 +25,7 @@ export interface StickySidebarState {
 
 const stickyfill = Stickyfill && Stickyfill();
 
-const StyledStickySidebar = styled.div<{ open?: boolean }>`
+const StyledStickySidebar = styled.div<{ $open?: boolean }>`
   width: ${props => props.theme.sidebar.width};
   background-color: ${props => props.theme.sidebar.backgroundColor};
   overflow: hidden;
@@ -45,7 +45,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
     z-index: 20;
     width: 100%;
     background: ${({ theme }) => theme.sidebar.backgroundColor};
-    display: ${props => (props.open ? 'flex' : 'none')};
+    display: ${props => (props.$open ? 'flex' : 'none')};
   `};
 
   @media print {
@@ -85,7 +85,7 @@ const FloatingButton = styled.div`
 
 @observer
 export class StickyResponsiveSidebar extends React.Component<
-  StickySidebarProps,
+  React.PropsWithChildren<StickySidebarProps>,
   StickySidebarState
 > {
   static contextType = OptionsContext;
@@ -130,7 +130,7 @@ export class StickyResponsiveSidebar extends React.Component<
     return (
       <>
         <StyledStickySidebar
-          open={open}
+          $open={open}
           className={this.props.className}
           style={{
             top,

src/components/StoreBuilder.ts

@@ -56,6 +56,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
       }
     }
     load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [spec, specUrl]);
 
   const store = React.useMemo(() => {

src/components/__tests__/FieldDetails.test.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import { FieldDetails } from '../Fields/FieldDetails';
+import { SchemaModel } from '../../services/models/Schema';
+import { withTheme } from '../testProviders';
+
+jest.mock('../ExternalDocumentation/ExternalDocumentation', () => ({
+  ExternalDocumentation: () => {
+    return <div />;
+  },
+}));
+
+describe('FieldDetailsComponent', () => {
+  it('renders correctly', () => {
+    const mockFieldProps = {
+      showExamples: true,
+      field: {
+        schema: {
+          type: 'array',
+          default: [],
+          typePrefix: 'test type prefix',
+          displayType: 'array',
+          title: 'test title',
+          externalDocs: undefined,
+          constraints: [''],
+        } as SchemaModel,
+        example: 'example',
+        name: 'name',
+        expanded: false,
+        required: false,
+        kind: '',
+        deprecated: false,
+        collapse: jest.fn(),
+        toggle: jest.fn(),
+        explode: false,
+        expand: jest.fn(),
+        description: 'test description',
+      },
+      renderDiscriminatorSwitch: jest.fn(),
+    };
+
+    const wrapper = shallow(withTheme(<FieldDetails {...mockFieldProps} />));
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('renders correctly when default value is object in request body', () => {
+    const mockFieldProps = {
+      showExamples: true,
+      field: {
+        schema: {
+          type: 'object',
+          default: { properties: {} },
+          displayType: 'object',
+          title: 'test title',
+          externalDocs: undefined,
+          constraints: [''],
+        } as SchemaModel,
+        example: 'example',
+        name: 'name',
+        expanded: false,
+        required: false,
+        kind: '',
+        deprecated: false,
+        collapse: jest.fn(),
+        toggle: jest.fn(),
+        explode: false,
+        expand: jest.fn(),
+        description: 'test description',
+        in: undefined,
+      },
+      renderDiscriminatorSwitch: jest.fn(),
+    };
+    const wrapper = shallow(withTheme(<FieldDetails {...mockFieldProps} />));
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('renders correctly when field items have string type and pattern', () => {
+    const mockFieldProps = {
+      showExamples: true,
+      field: {
+        schema: {
+          type: 'array',
+          displayType: 'Array of strings',
+          title: 'test title',
+          externalDocs: undefined,
+          constraints: [''],
+          items: {
+            type: 'string',
+            pattern: '^see regex[0-9]$',
+            constraints: ['<= 128 characters'],
+            externalDocs: undefined,
+          },
+        } as any as SchemaModel,
+        example: 'example',
+        name: 'name',
+        expanded: false,
+        required: false,
+        kind: '',
+        deprecated: false,
+        collapse: jest.fn(),
+        toggle: jest.fn(),
+        explode: false,
+        expand: jest.fn(),
+        description: 'test description',
+        in: undefined,
+      },
+      renderDiscriminatorSwitch: jest.fn(),
+    };
+    const wrapper = shallow(withTheme(<FieldDetails {...mockFieldProps} />));
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});

src/components/__tests__/JsonViewer.tsx

@@ -2,6 +2,7 @@
 
 import { mount, ReactWrapper } from 'enzyme';
 import * as React from 'react';
+import { act } from 'react';
 
 import { JsonViewer } from '../';
 import { withTheme } from '../testProviders';
@@ -50,5 +51,54 @@ describe('Components', () => {
       expect(flatDataComponent.html()).not.toContain('Expand all');
       expect(flatDataComponent.html()).not.toContain('Collapse all');
     });
+
+    describe('Keyboard Navigation', () => {
+      let component: ReactWrapper;
+      const data = {
+        a: 1,
+        b: {
+          c:
+            // Long string to test horizontal scrolling
+            Array(100).fill('hello').join(''),
+        },
+      };
+
+      beforeEach(() => {
+        component = mount(withTheme(<JsonViewer data={data} />));
+        ClipboardService.copySelected = origCopySelected;
+      });
+
+      test('should handle arrow key navigation', () => {
+        const prismDiv = component.find('div[tabIndex=0]');
+        const divElement = prismDiv.getDOMNode();
+
+        // Mock scrollLeft before events
+        Object.defineProperty(divElement, 'scrollLeft', {
+          get: jest.fn(() => 0),
+          set: jest.fn(),
+        });
+
+        // Trigger events inside act()
+        act(() => {
+          divElement.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: 'ArrowRight',
+              bubbles: true,
+            }),
+          );
+        });
+
+        act(() => {
+          divElement.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: 'ArrowLeft',
+              bubbles: true,
+            }),
+          );
+        });
+
+        expect(divElement.scrollLeft).toBe(0);
+      });
+    });
   });
 });

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

@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldDetailsComponent renders correctly 1`] = `
+<div>
+  <div>
+    <span
+      class="sc-kpDqfm sc-dAlyuH cGRfjn gHomYR"
+    >
+      test type prefix
+    </span>
+    <span
+      class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+    >
+      array
+    </span>
+    <span
+      class="sc-kpDqfm sc-cwHptR cGRfjn gyVIPr"
+    >
+       (test title) 
+    </span>
+    <span>
+       
+      <span
+        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+      >
+          
+      </span>
+    </span>
+  </div>
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Default: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      []
+    </span>
+  </div>
+   
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Example: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      "example"
+    </span>
+  </div>
+  <div>
+    <div
+      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+    >
+      <p>
+        test description
+      </p>
+      
+
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FieldDetailsComponent renders correctly when default value is object in request body 1`] = `
+<div>
+  <div>
+    <span
+      class="sc-kpDqfm sc-dAlyuH cGRfjn gHomYR"
+    />
+    <span
+      class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+    >
+      object
+    </span>
+    <span
+      class="sc-kpDqfm sc-cwHptR cGRfjn gyVIPr"
+    >
+       (test title) 
+    </span>
+    <span>
+       
+      <span
+        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+      >
+          
+      </span>
+    </span>
+  </div>
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Default: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      {"properties":{}}
+    </span>
+  </div>
+   
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Example: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      "example"
+    </span>
+  </div>
+  <div>
+    <div
+      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+    >
+      <p>
+        test description
+      </p>
+      
+
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FieldDetailsComponent renders correctly when field items have string type and pattern 1`] = `
+<div>
+  <div>
+    <span
+      class="sc-kpDqfm sc-dAlyuH cGRfjn gHomYR"
+    />
+    <span
+      class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+    >
+      Array of strings
+    </span>
+    <span
+      class="sc-kpDqfm sc-cwHptR cGRfjn gyVIPr"
+    >
+       (test title) 
+    </span>
+    <span>
+       
+      <span
+        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+      >
+          
+      </span>
+    </span>
+    <span
+      class="sc-kpDqfm sc-dAlyuH sc-gvZAcH cGRfjn gHomYR eXivNJ"
+    >
+      [ items
+      <span>
+         
+        <span
+          class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+        >
+           &lt;= 128 characters 
+        </span>
+      </span>
+      <span
+        class="sc-kpDqfm sc-eDPEul cGRfjn cCKYVD"
+      >
+        ^see regex[0-9]$
+      </span>
+       ]
+    </span>
+  </div>
+   
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Example: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      "example"
+    </span>
+  </div>
+  <div>
+    <div
+      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+    >
+      <p>
+        test description
+      </p>
+      
+
+    </div>
+  </div>
+</div>
+`;

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

@@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
        
       <div>
         <div
-          class="sc-eeDRCY sc-eBMEME gTGgei hXXgcw"
+          class="sc-eeDRCY sc-eBMEME gTGgei fbXBig"
         />
       </div>
     </div>

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

@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SecurityRequirement should render SecurityDefs 1`] = `
-"<div id=\\"section/Authentication/petstore_auth\\" data-section-id=\\"section/Authentication/petstore_auth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">petstore_auth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials.
+"<div id="section/Authentication/petstore_auth" data-section-id="section/Authentication/petstore_auth" class="sc-dcJsrY bBkGhy"><div class="sc-kAyceB hBQWIZ"><div class="sc-fqkvVR oJKYx"><h2 class="sc-jXbUNg fWnwAh">petstore_auth</h2><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>Get access to data while protecting your account credentials.
 OAuth2 is also a safer and more secure way to give you access.</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei dNjZhe hXtrri redoc-markdown\\"><p>modify pets in your account</p>
+</div><div class="sc-iEXKAA ebCiwb"><div class="sc-ejfMa-d bdDYxc"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Flow type: </b><code>implicit </code></div><div class="sc-ejfMa-d bdDYxc"><strong> Authorization URL: </strong><code><a target="_blank" rel="noopener noreferrer" href="http://petstore.swagger.io/api/oauth/dialog">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class="sc-ejfMa-d bdDYxc"><b> Scopes: </b></div><div class="sc-EgOXT kRIdPi container" style="height: 4em;"><ul><li><code>write:pets</code> - <div class="sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei iCmQdS hXtrri redoc-markdown"><p>modify pets in your account</p>
-</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei dNjZhe hXtrri redoc-markdown\\"><p>read your pets</p>
+</div></li><li><code>read:pets</code> - <div class="sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei iCmQdS hXtrri redoc-markdown"><p>read your pets</p>
-</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_PersonalAccessToken\\" data-section-id=\\"section/Authentication/GitLab_PersonalAccessToken\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_PersonalAccessToken</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p>
+</div></li></ul></div><div class="sc-eZYNyq dIKkVb"></div></div></div></div></div></div><div id="section/Authentication/GitLab_PersonalAccessToken" data-section-id="section/Authentication/GitLab_PersonalAccessToken" class="sc-dcJsrY bBkGhy"><div class="sc-kAyceB hBQWIZ"><div class="sc-fqkvVR oJKYx"><h2 class="sc-jXbUNg fWnwAh">GitLab_PersonalAccessToken</h2><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>GitLab Personal Access Token description</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>API Key</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_OpenIdConnect\\" data-section-id=\\"section/Authentication/GitLab_OpenIdConnect\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_OpenIdConnect</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p>
+</div><div class="sc-iEXKAA ebCiwb"><div class="sc-ejfMa-d bdDYxc"><b>Security Scheme Type: </b><span>API Key</span></div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id="section/Authentication/GitLab_OpenIdConnect" data-section-id="section/Authentication/GitLab_OpenIdConnect" class="sc-dcJsrY bBkGhy"><div class="sc-kAyceB hBQWIZ"><div class="sc-fqkvVR oJKYx"><h2 class="sc-jXbUNg fWnwAh">GitLab_OpenIdConnect</h2><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>GitLab OpenIdConnect description</p>
-</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">basicAuth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div></div></div></div>"
+</div><div class="sc-iEXKAA ebCiwb"><div class="sc-ejfMa-d bdDYxc"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Connect URL: </b><code><a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/.well-known/openid-configuration">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id="section/Authentication/basicAuth" data-section-id="section/Authentication/basicAuth" class="sc-dcJsrY bBkGhy"><div class="sc-kAyceB hBQWIZ"><div class="sc-fqkvVR oJKYx"><h2 class="sc-jXbUNg fWnwAh">basicAuth</h2><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"></div><div class="sc-iEXKAA ebCiwb"><div class="sc-ejfMa-d bdDYxc"><b>Security Scheme Type: </b><span>HTTP</span></div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class="sc-ejfMa-d bdDYxc"></div></div></div></div></div></div>"
 `;
 
-exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bDumWk iWBBny\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR iZRiKW\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty eoFcYg\\"><span class=\\"sc-kbousE cpXQuZ\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE cpXQuZ\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;
+exports[`SecurityRequirement should render authDefinition 1`] = `"<div class="sc-dkmUuB fUBzjk"><div class="sc-dBmzty iDyBRL"><h5 class="sc-dAlyuH sc-bDumWk jbQuod feBYnB">Authorizations:</h5><svg class="sc-cwHptR iZRiKW" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></div><div class="sc-fifgRP eqIYDA"><span class="sc-sLsrZ jmro">(<span class="sc-kbousE iMnLRS">API Key: <i>GitLab_PersonalAccessToken</i></span><span class="sc-kbousE iMnLRS">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class="sc-kbousE iMnLRS">HTTP: <i>basicAuth</i></span>) </span><span class="sc-sLsrZ jmro"><span class="sc-kbousE iMnLRS">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;
 
 exports[`SecurityRequirement should render authDefinition 2`] = `
-"<div class=\\"sc-bDumWk gtsPcy\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR dSJqIk\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty llvZdI\\"><span class=\\"sc-kbousE dOwJQz\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE dOwJQz\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eyvILC bzHwfc\\">write:pets</code><code class=\\"sc-eyvILC bzHwfc\\">read:pets</code>) </span></span></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials.
+"<div class="sc-dkmUuB KTEsk"><div class="sc-dBmzty iDyBRL"><h5 class="sc-dAlyuH sc-bDumWk jbQuod feBYnB">Authorizations:</h5><svg class="sc-cwHptR dSJqIk" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true"><polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon></svg></div><div class="sc-fifgRP gNcumo"><span class="sc-sLsrZ iTheFK">(<span class="sc-kbousE iMnLRS">API Key: <i>GitLab_PersonalAccessToken</i></span><span class="sc-kbousE iMnLRS">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class="sc-kbousE iMnLRS">HTTP: <i>basicAuth</i></span>) </span><span class="sc-sLsrZ iTheFK"><span class="sc-kbousE iMnLRS">OAuth2: <i>petstore_auth</i> (<code class="sc-gfoqjT dapMvh">write:pets</code><code class="sc-gfoqjT dapMvh">read:pets</code>) </span></span></div></div><div class="sc-iEXKAA ebCiwb"><h5><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="11" height="11"><path fill="currentColor" d="M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z"></path></svg> OAuth2: petstore_auth</h5><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>Get access to data while protecting your account credentials.
 OAuth2 is also a safer and more secure way to give you access.</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei dNjZhe hXtrri redoc-markdown\\"><p>modify pets in your account</p>
+</div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Flow type: </b><code>implicit </code></div><div class="sc-ejfMa-d bdDYxc"><strong> Authorization URL: </strong><code><a target="_blank" rel="noopener noreferrer" href="http://petstore.swagger.io/api/oauth/dialog">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class="sc-ejfMa-d bdDYxc"><b> Scopes: </b></div><div class="sc-EgOXT kRIdPi container" style="height: 4em;"><ul><li><code>write:pets</code> - <div class="sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei iCmQdS hXtrri redoc-markdown"><p>modify pets in your account</p>
-</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei dNjZhe hXtrri redoc-markdown\\"><p>read your pets</p>
+</div></li><li><code>read:pets</code> - <div class="sc-eeDRCY sc-eBMEME sc-fhzFiK gTGgei iCmQdS hXtrri redoc-markdown"><p>read your pets</p>
-</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p>
+</div></li></ul></div><div class="sc-eZYNyq dIKkVb"></div></div></div><div class="sc-iEXKAA ebCiwb"><h5><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="11" height="11"><path fill="currentColor" d="M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>GitLab Personal Access Token description</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p>
+</div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class="sc-iEXKAA ebCiwb"><h5><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="11" height="11"><path fill="currentColor" d="M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><p>GitLab OpenIdConnect description</p>
-</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div>,"
+</div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>Connect URL: </b><code><a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/.well-known/openid-configuration">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class="sc-iEXKAA ebCiwb"><h5><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="11" height="11"><path fill="currentColor" d="M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z"></path></svg> HTTP: basicAuth</h5><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"></div><div class="sc-eeDRCY sc-eBMEME gTGgei fMmru"><div class="sc-ejfMa-d bdDYxc"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class="sc-ejfMa-d bdDYxc"></div></div></div>,"
 `;

src/components/testProviders.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 import defaultTheme, { resolveTheme } from '../theme';
 
-export default class TestThemeProvider extends React.Component {
+import { PropsWithChildren } from 'react';
+
+export default class TestThemeProvider extends React.Component<PropsWithChildren<any>> {
   render() {
     return (
       <ThemeProvider theme={resolveTheme(defaultTheme)}>

src/services/MenuBuilder.ts

@@ -1,4 +1,4 @@
-import type { OpenAPISpec, OpenAPIPaths, OpenAPITag, OpenAPISchema } from '../types';
+import type { OpenAPIPaths, OpenAPITag, OpenAPISchema } from '../types';
 import { isOperationName, JsonPointer, alphabeticallyByProp } from '../utils';
 import { MarkdownRenderer } from './MarkdownRenderer';
 import { GroupModel, OperationModel } from './models';
@@ -17,9 +17,19 @@ export class MenuBuilder {
     options: RedocNormalizedOptions,
   ): ContentItemModel[] {
     const spec = parser.spec;
+    const { schemaDefinitionsTagName } = options;
 
     const items: ContentItemModel[] = [];
-    const tagsMap = MenuBuilder.getTagsWithOperations(parser, spec);
+    const tags = [...(spec.tags || [])];
+    const hasAutogenerated = tags.find(
+      tag => tag?.name === schemaDefinitionsTagName,
+    );
+
+    if (!hasAutogenerated && schemaDefinitionsTagName) {
+      tags.push({ name: schemaDefinitionsTagName });
+    }
+    const tagsMap = MenuBuilder.getTagsWithOperations(parser, tags);
+
     items.push(...MenuBuilder.addMarkdownItems(spec.info.description || '', undefined, 1, options));
     if (spec['x-tagGroups'] && spec['x-tagGroups'].length > 0) {
       items.push(
@@ -28,6 +38,7 @@ export class MenuBuilder {
     } else {
       items.push(...MenuBuilder.getTagsItems(parser, tagsMap, undefined, undefined, options));
     }
+
     return items;
   }
 
@@ -141,6 +152,7 @@ export class MenuBuilder {
         parser,
         tag,
         parent: item,
+        schemaDefinitionsTagName: options.schemaDefinitionsTagName,
       });
 
       item.items = [
@@ -195,10 +207,11 @@ export class MenuBuilder {
   /**
    * collects tags and maps each tag to list of operations belonging to this tag
    */
-  static getTagsWithOperations(parser: OpenAPIParser, spec: OpenAPISpec): TagsInfoMap {
+  static getTagsWithOperations(parser: OpenAPIParser, explicitTags: OpenAPITag[]): TagsInfoMap {
+    const { spec } = parser;
     const tags: TagsInfoMap = {};
     const webhooks = spec['x-webhooks'] || spec.webhooks;
-    for (const tag of spec.tags || []) {
+    for (const tag of explicitTags || []) {
       tags[tag.name] = { ...tag, operations: [] };
     }
 
@@ -260,14 +273,18 @@ export class MenuBuilder {
     parser,
     tag,
     parent,
+    schemaDefinitionsTagName,
   }: {
     parser: OpenAPIParser;
     tag: TagInfo;
     parent: GroupModel;
+    schemaDefinitionsTagName?: string;
   }): GroupModel[] {
+    const defaultTags = schemaDefinitionsTagName ? [schemaDefinitionsTagName] : [];
+
     return Object.entries(parser.spec.components?.schemas || {})
       .map(([schemaName, schema]) => {
-        const schemaTags = schema['x-tags'];
+        const schemaTags = schema['x-tags'] || defaultTags;
         if (!schemaTags?.includes(tag.name)) return null;
 
         const item = new GroupModel(

src/services/OpenAPIParser.ts

@@ -50,7 +50,7 @@ export class OpenAPIParser {
   /**
    * get spec part by JsonPointer ($ref)
    */
-  byRef = <T extends any = any>(ref: string): T | undefined => {
+  byRef = <T = any>(ref: string): T | undefined => {
     let res;
     if (!this.spec) {
       return;
@@ -70,7 +70,7 @@ export class OpenAPIParser {
   /**
    * checks if the object is OpenAPI reference (contains $ref property)
    */
-  isRef<T extends unknown>(obj: OpenAPIRef | T): obj is OpenAPIRef {
+  isRef<T>(obj: OpenAPIRef | T): obj is OpenAPIRef {
     if (!obj) {
       return false;
     }
@@ -84,7 +84,7 @@ export class OpenAPIParser {
    * @param forceCircular whether to dereference even if it is circular ref
    * @param mergeAsAllOf
    */
-  deref<T extends unknown>(
+  deref<T>(
     obj: OpenAPIRef | T,
     baseRefsStack: string[] = [],
     mergeAsAllOf = false,
@@ -124,7 +124,7 @@ export class OpenAPIParser {
     };
   }
 
-  mergeRefs<T extends unknown>(ref: OpenAPIRef, resolved: T, mergeAsAllOf: boolean): T {
+  mergeRefs<T>(ref: OpenAPIRef, resolved: T, mergeAsAllOf: boolean): T {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { $ref, ...rest } = ref;
     const keys = Object.keys(rest);
@@ -364,14 +364,18 @@ export class OpenAPIParser {
 
     const allOf = schema.allOf;
     for (let i = 0; i < allOf.length; i++) {
-      const sub = allOf[i];
+      const { oneOf, ...sub } = allOf[i];
-      if (Array.isArray(sub.oneOf)) {
+      if (!oneOf) {
+        continue;
+      }
+      if (Array.isArray(oneOf)) {
         const beforeAllOf = allOf.slice(0, i);
         const afterAllOf = allOf.slice(i + 1);
+        const siblingValues = Object.keys(sub).length > 0 ? [sub] : [];
         return {
-          oneOf: sub.oneOf.map((part: OpenAPISchema) => {
+          oneOf: oneOf.map((part: OpenAPISchema) => {
             return {
-              allOf: [...beforeAllOf, part, ...afterAllOf],
+              allOf: [...beforeAllOf, ...siblingValues, part, ...afterAllOf],
               'x-refsStack': refsStack,
             };
           }),

src/services/RedocNormalizedOptions.ts

@@ -6,35 +6,48 @@ import { setRedocLabels } from './Labels';
 import { SideNavStyleEnum } from './types';
 import type { LabelsConfigRaw, MDXComponentMeta } from './types';
 
+export type DownloadUrlsConfig = {
+  title?: string;
+  url: string;
+}[];
+
 export interface RedocRawOptions {
   theme?: ThemeInterface;
   scrollYOffset?: number | string | (() => number);
   hideHostname?: boolean | string;
   expandResponses?: string | 'all';
-  requiredPropsFirst?: boolean | string;
+  requiredPropsFirst?: boolean | string; // remove in next major release
+  sortRequiredPropsFirst?: boolean | string;
   sortPropsAlphabetically?: boolean | string;
   sortEnumValuesAlphabetically?: boolean | string;
   sortOperationsAlphabetically?: boolean | string;
   sortTagsAlphabetically?: boolean | string;
   nativeScrollbars?: boolean | string;
   pathInMiddlePanel?: boolean | string;
-  untrustedSpec?: boolean | string;
+  untrustedSpec?: boolean | string; // remove in next major release
+  sanitize?: boolean | string;
   hideLoading?: boolean | string;
-  hideDownloadButton?: boolean | string;
+  hideDownloadButton?: boolean | string; // remove in next major release
+  hideDownloadButtons?: boolean | string;
   downloadFileName?: string;
   downloadDefinitionUrl?: string;
+  downloadUrls?: DownloadUrlsConfig;
   disableSearch?: boolean | string;
   onlyRequiredInSamples?: boolean | string;
   showExtensions?: boolean | string | string[];
   sideNavStyle?: SideNavStyleEnum;
   hideSingleRequestSampleTab?: boolean | string;
+  hideRequestPayloadSample?: boolean;
   menuToggle?: boolean | string;
-  jsonSampleExpandLevel?: number | string | 'all';
+  jsonSampleExpandLevel?: number | string | 'all'; // remove in next major release
+  jsonSamplesExpandLevel?: number | string | 'all';
   hideSchemaTitles?: boolean | string;
   simpleOneOfTypeLabel?: boolean | string;
   payloadSampleIdx?: number;
   expandSingleSchemaField?: boolean | string;
-  schemaExpansionLevel?: number | string | 'all';
+  schemaExpansionLevel?: number | string | 'all'; // remove in next major release
+  schemasExpansionLevel?: number | string | 'all';
+  schemaDefinitionsTagName?: string;
   showObjectSchemaExamples?: boolean | string;
   showSecuritySchemeType?: boolean;
   hideSecuritySection?: boolean;
@@ -51,11 +64,13 @@ export interface RedocRawOptions {
   maxDisplayedEnumValues?: number;
   ignoreNamedSchemas?: string[] | string;
   hideSchemaPattern?: boolean;
-  generatedPayloadSamplesMaxDepth?: number;
+  generatedPayloadSamplesMaxDepth?: number; // remove in next major release
+  generatedSamplesMaxDepth?: number;
   nonce?: string;
   hideFab?: boolean;
   minCharacterLengthToInitSearch?: number;
   showWebhookVerb?: boolean;
+  hidePropertiesPrefix?: boolean;
 }
 
 export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -215,30 +230,33 @@ export class RedocNormalizedOptions {
   scrollYOffset: () => number;
   hideHostname: boolean;
   expandResponses: { [code: string]: boolean } | 'all';
-  requiredPropsFirst: boolean;
+  sortRequiredPropsFirst: boolean;
   sortPropsAlphabetically: boolean;
   sortEnumValuesAlphabetically: boolean;
   sortOperationsAlphabetically: boolean;
   sortTagsAlphabetically: boolean;
   nativeScrollbars: boolean;
   pathInMiddlePanel: boolean;
-  untrustedSpec: boolean;
+  sanitize: boolean;
-  hideDownloadButton: boolean;
+  hideDownloadButtons: boolean;
   downloadFileName?: string;
   downloadDefinitionUrl?: string;
+  downloadUrls?: DownloadUrlsConfig;
   disableSearch: boolean;
   onlyRequiredInSamples: boolean;
   showExtensions: boolean | string[];
   sideNavStyle: SideNavStyleEnum;
   hideSingleRequestSampleTab: boolean;
+  hideRequestPayloadSample: boolean;
   menuToggle: boolean;
-  jsonSampleExpandLevel: number;
+  jsonSamplesExpandLevel: number;
   enumSkipQuotes: boolean;
   hideSchemaTitles: boolean;
   simpleOneOfTypeLabel: boolean;
   payloadSampleIdx: number;
   expandSingleSchemaField: boolean;
-  schemaExpansionLevel: number;
+  schemasExpansionLevel: number;
+  schemaDefinitionsTagName?: string;
   showObjectSchemaExamples: boolean;
   showSecuritySchemeType?: boolean;
   hideSecuritySection?: boolean;
@@ -252,10 +270,11 @@ export class RedocNormalizedOptions {
 
   ignoreNamedSchemas: Set<string>;
   hideSchemaPattern: boolean;
-  generatedPayloadSamplesMaxDepth: number;
+  generatedSamplesMaxDepth: number;
   hideFab: boolean;
   minCharacterLengthToInitSearch: number;
   showWebhookVerb: boolean;
+  hidePropertiesPrefix?: boolean;
 
   nonce?: string;
 
@@ -286,32 +305,39 @@ export class RedocNormalizedOptions {
     this.scrollYOffset = RedocNormalizedOptions.normalizeScrollYOffset(raw.scrollYOffset);
     this.hideHostname = RedocNormalizedOptions.normalizeHideHostname(raw.hideHostname);
     this.expandResponses = RedocNormalizedOptions.normalizeExpandResponses(raw.expandResponses);
-    this.requiredPropsFirst = argValueToBoolean(raw.requiredPropsFirst);
+    this.sortRequiredPropsFirst = argValueToBoolean(
+      raw.sortRequiredPropsFirst || raw.requiredPropsFirst,
+    );
     this.sortPropsAlphabetically = argValueToBoolean(raw.sortPropsAlphabetically);
     this.sortEnumValuesAlphabetically = argValueToBoolean(raw.sortEnumValuesAlphabetically);
     this.sortOperationsAlphabetically = argValueToBoolean(raw.sortOperationsAlphabetically);
     this.sortTagsAlphabetically = argValueToBoolean(raw.sortTagsAlphabetically);
     this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
     this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);
-    this.untrustedSpec = argValueToBoolean(raw.untrustedSpec);
+    this.sanitize = argValueToBoolean(raw.sanitize || raw.untrustedSpec);
-    this.hideDownloadButton = argValueToBoolean(raw.hideDownloadButton);
+    this.hideDownloadButtons = argValueToBoolean(raw.hideDownloadButtons || raw.hideDownloadButton);
     this.downloadFileName = raw.downloadFileName;
     this.downloadDefinitionUrl = raw.downloadDefinitionUrl;
+    this.downloadUrls = raw.downloadUrls;
     this.disableSearch = argValueToBoolean(raw.disableSearch);
     this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
     this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
     this.sideNavStyle = RedocNormalizedOptions.normalizeSideNavStyle(raw.sideNavStyle);
     this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
+    this.hideRequestPayloadSample = argValueToBoolean(raw.hideRequestPayloadSample);
     this.menuToggle = argValueToBoolean(raw.menuToggle, true);
-    this.jsonSampleExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel(
+    this.jsonSamplesExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel(
-      raw.jsonSampleExpandLevel,
+      raw.jsonSamplesExpandLevel || raw.jsonSampleExpandLevel,
     );
     this.enumSkipQuotes = argValueToBoolean(raw.enumSkipQuotes);
     this.hideSchemaTitles = argValueToBoolean(raw.hideSchemaTitles);
     this.simpleOneOfTypeLabel = argValueToBoolean(raw.simpleOneOfTypeLabel);
     this.payloadSampleIdx = RedocNormalizedOptions.normalizePayloadSampleIdx(raw.payloadSampleIdx);
     this.expandSingleSchemaField = argValueToBoolean(raw.expandSingleSchemaField);
-    this.schemaExpansionLevel = argValueToExpandLevel(raw.schemaExpansionLevel);
+    this.schemasExpansionLevel = argValueToExpandLevel(
+      raw.schemasExpansionLevel || raw.schemaExpansionLevel,
+    );
+    this.schemaDefinitionsTagName = raw.schemaDefinitionsTagName;
     this.showObjectSchemaExamples = argValueToBoolean(raw.showObjectSchemaExamples);
     this.showSecuritySchemeType = argValueToBoolean(raw.showSecuritySchemeType);
     this.hideSecuritySection = argValueToBoolean(raw.hideSecuritySection);
@@ -327,13 +353,13 @@ export class RedocNormalizedOptions {
       : raw.ignoreNamedSchemas?.split(',').map(s => s.trim());
     this.ignoreNamedSchemas = new Set(ignoreNamedSchemas);
     this.hideSchemaPattern = argValueToBoolean(raw.hideSchemaPattern);
-    this.generatedPayloadSamplesMaxDepth =
+    this.generatedSamplesMaxDepth = RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
-      RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
+      raw.generatedSamplesMaxDepth || raw.generatedPayloadSamplesMaxDepth,
-        raw.generatedPayloadSamplesMaxDepth,
     );
     this.nonce = raw.nonce;
     this.hideFab = argValueToBoolean(raw.hideFab);
     this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3;
     this.showWebhookVerb = argValueToBoolean(raw.showWebhookVerb);
+    this.hidePropertiesPrefix = argValueToBoolean(raw.hidePropertiesPrefix, true);
   }
 }

src/services/ScrollService.ts

@@ -1,5 +1,5 @@
 import { bind } from 'decko';
-import * as EventEmitter from 'eventemitter3';
+import { EventEmitter } from 'eventemitter3';
 
 import { IS_BROWSER, querySelector, Throttle } from '../utils';
 import type { RedocNormalizedOptions } from './RedocNormalizedOptions';

src/services/__tests__/__snapshots__/OpenAPIParser.test.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Models Schema should correct resolve double $ref if no need sibling 1`] = `
-Object {
+{
-  "refsStack": Array [
+  "refsStack": [
     "#/components/schemas/Parent",
   ],
-  "resolved": Object {
+  "resolved": {
-    "properties": Object {
+    "properties": {
-      "test": Object {
+      "test": {
         "type": "string",
       },
     },
@@ -17,38 +17,46 @@ Object {
 `;
 
 exports[`Models Schema should hoist oneOfs when mergin allOf 1`] = `
-Object {
+{
-  "oneOf": Array [
+  "oneOf": [
-    Object {
+    {
-      "allOf": Array [
+      "allOf": [
-        Object {
+        {
-          "properties": Object {
+          "properties": {
-            "username": Object {
+            "id": {
+              "description": "The user's ID",
+              "type": "integer",
+            },
+          },
+        },
+        {
+          "properties": {
+            "username": {
               "description": "The user's name",
               "type": "string",
             },
           },
         },
-        Object {
+        {
-          "properties": Object {
+          "properties": {
-            "extra": Object {
+            "extra": {
               "type": "string",
             },
           },
         },
-        Object {
+        {
-          "oneOf": Array [
+          "oneOf": [
-            Object {
+            {
-              "properties": Object {
+              "properties": {
-                "password": Object {
+                "password": {
                   "description": "The user's password",
                   "type": "string",
                 },
               },
             },
-            Object {
+            {
-              "properties": Object {
+              "properties": {
-                "mobile": Object {
+                "mobile": {
                   "description": "The user's mobile",
                   "type": "string",
                 },
@@ -59,36 +67,93 @@ Object {
       ],
       "x-refsStack": undefined,
     },
-    Object {
+    {
-      "allOf": Array [
+      "allOf": [
-        Object {
+        {
-          "properties": Object {
+          "properties": {
-            "email": Object {
+            "id": {
+              "description": "The user's ID",
+              "type": "integer",
+            },
+          },
+        },
+        {
+          "properties": {
+            "email": {
               "description": "The user's email",
               "type": "string",
             },
           },
         },
-        Object {
+        {
-          "properties": Object {
+          "properties": {
-            "extra": Object {
+            "extra": {
               "type": "string",
             },
           },
         },
-        Object {
+        {
-          "oneOf": Array [
+          "oneOf": [
-            Object {
+            {
-              "properties": Object {
+              "properties": {
-                "password": Object {
+                "password": {
                   "description": "The user's password",
                   "type": "string",
                 },
               },
             },
-            Object {
+            {
-              "properties": Object {
+              "properties": {
-                "mobile": Object {
+                "mobile": {
+                  "description": "The user's mobile",
+                  "type": "string",
+                },
+              },
+            },
+          ],
+        },
+      ],
+      "x-refsStack": undefined,
+    },
+    {
+      "allOf": [
+        {
+          "properties": {
+            "id": {
+              "description": "The user's ID",
+              "type": "integer",
+            },
+          },
+        },
+        {
+          "properties": {
+            "id": {
+              "description": "The user's ID",
+              "format": "uuid",
+              "type": "string",
+            },
+          },
+        },
+        {
+          "properties": {
+            "extra": {
+              "type": "string",
+            },
+          },
+        },
+        {
+          "oneOf": [
+            {
+              "properties": {
+                "password": {
+                  "description": "The user's password",
+                  "type": "string",
+                },
+              },
+            },
+            {
+              "properties": {
+                "mobile": {
                   "description": "The user's mobile",
                   "type": "string",
                 },
@@ -104,11 +169,11 @@ Object {
 `;
 
 exports[`Models Schema should override description from $ref of the referenced component, when sibling description exists  1`] = `
-Object {
+{
-  "refsStack": Array [
+  "refsStack": [
     "#/components/schemas/Test",
   ],
-  "resolved": Object {
+  "resolved": {
     "description": "Overriden description",
     "type": "object",
   },

src/services/__tests__/__snapshots__/prism.test.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`prism.js helpers highlight js code 1`] = `"<span class=\\"token keyword\\">const</span> t <span class=\\"token operator\\">=</span> <span class=\\"token number\\">10</span><span class=\\"token punctuation\\">;</span>"`;
+exports[`prism.js helpers highlight js code 1`] = `"<span class="token keyword">const</span> t <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>"`;

src/services/__tests__/fixtures/nestedEnumDescroptionSample.json

@@ -0,0 +1,24 @@
+{
+  "openapi": "3.0.0",
+  "info": {
+    "version": "1.0",
+    "title": "Test"
+  },
+  "components": {
+    "schemas": {
+      "Test": {
+        "type": "array",
+        "description": "test description",
+        "items": {
+          "type": "string",
+          "description": "test description",
+          "enum": ["authorize", "do-nothing"],
+          "x-enumDescriptions": {
+            "authorize-and-void": "Will create an authorize transaction in the amount/currency of the request, followed by a void",
+            "do-nothing": "Will do nothing, and return an approved `setup` transaction. This is the default behavior."
+          }
+        }
+      }
+    }
+  }
+}

src/services/__tests__/fixtures/oneOfHoist.json

@@ -9,6 +9,12 @@
       "test": {
         "allOf": [
           {
+            "properties": {
+              "id": {
+                "description": "The user's ID",
+                "type": "integer"
+              }
+            },
             "oneOf": [
               {
                 "properties": {
@@ -25,6 +31,15 @@
                     "type": "string"
                   }
                 }
+              },
+              {
+                "properties": {
+                  "id": {
+                    "description": "The user's ID",
+                    "type": "string",
+                    "format": "uuid"
+                  }
+                }
               }
             ]
           },

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

@@ -139,10 +139,18 @@ describe('Models', () => {
       } as any;
 
       const opts = new RedocNormalizedOptions({
-        downloadDefinitionUrl: 'https:test.com/filename.yaml',
+        downloadUrls: [{ title: 'Openapi description', url: 'https:test.com/filename.yaml' }],
       });
       const info = new ApiInfoModel(parser, opts);
-      expect(info.downloadLink).toEqual('https:test.com/filename.yaml');
+      expect(info.downloadUrls).toMatchInlineSnapshot(`
+        [
+          {
+            "title": "Openapi description",
+            "url": "https:test.com/filename.yaml",
+          },
+        ]
+      `);
+      expect(info.downloadFileName).toMatchInlineSnapshot(`"openapi.json"`);
     });
 
     test('should correctly populate download link and download file name', () => {
@@ -158,8 +166,29 @@ describe('Models', () => {
         downloadFileName: 'test.yaml',
       });
       const info = new ApiInfoModel(parser, opts);
-      expect(info.downloadLink).toEqual('https:test.com/filename.yaml');
+      expect(info.downloadUrls).toMatchInlineSnapshot(`
-      expect(info.downloadFileName).toEqual('test.yaml');
+        [
+          {
+            "title": "Download",
+            "url": "https:test.com/filename.yaml",
+          },
+        ]
+      `);
+      expect(info.downloadFileName).toMatchInlineSnapshot(`"test.yaml"`);
+
+      const opts2 = new RedocNormalizedOptions({
+        downloadUrls: [{ title: 'Download file', url: 'https:test.com/filename.yaml' }],
+      });
+      const info2 = new ApiInfoModel(parser, opts2);
+      expect(info2.downloadUrls).toMatchInlineSnapshot(`
+        [
+          {
+            "title": "Download file",
+            "url": "https:test.com/filename.yaml",
+          },
+        ]
+      `);
+      expect(info2.downloadFileName).toMatchInlineSnapshot(`"openapi.json"`);
     });
   });
 });

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

@@ -13,6 +13,17 @@ describe('Models', () => {
   describe('Schema', () => {
     let parser;
 
+    test('parsing nested x-enumDescription', () => {
+      const spec = require('../fixtures/nestedEnumDescroptionSample.json');
+      parser = new OpenAPIParser(spec, undefined, opts);
+      const testSchema = spec.components.schemas.Test;
+      const schemaModel = new SchemaModel(parser, testSchema, '', opts);
+
+      expect(schemaModel['x-enumDescriptions']).toStrictEqual(
+        testSchema.items['x-enumDescriptions'],
+      );
+    });
+
     test('discriminator with one field', () => {
       const spec = require('../fixtures/discriminator.json');
       parser = new OpenAPIParser(spec, undefined, opts);

src/services/__tests__/models/__snapshots__/Schema.test.ts.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Models Schema schemaDefinition should resolve field with conditional operators 1`] = `
-Object {
+{
   "allOf": undefined,
   "default": undefined,
   "description": undefined,
-  "items": Object {
+  "items": {
     "allOf": undefined,
     "description": undefined,
     "format": "url",
@@ -14,7 +14,7 @@ Object {
     "type": "string",
     "writeOnly": undefined,
     "x-circular-ref": undefined,
-    "x-parentRefs": Array [],
+    "x-parentRefs": [],
   },
   "maxItems": 20,
   "minItems": 1,
@@ -24,16 +24,16 @@ Object {
   "writeOnly": undefined,
   "x-circular-ref": undefined,
   "x-displayName": "isString",
-  "x-parentRefs": Array [],
+  "x-parentRefs": [],
 }
 `;
 
 exports[`Models Schema schemaDefinition should resolve field with conditional operators 2`] = `
-Object {
+{
   "allOf": undefined,
   "default": undefined,
   "description": undefined,
-  "items": Object {
+  "items": {
     "allOf": undefined,
     "description": undefined,
     "format": "url",
@@ -42,14 +42,14 @@ Object {
     "type": "string",
     "writeOnly": undefined,
     "x-circular-ref": undefined,
-    "x-parentRefs": Array [],
+    "x-parentRefs": [],
   },
   "maxItems": 10,
   "minItems": 1,
-  "pattern": "\\\\d+",
+  "pattern": "\\d+",
   "readOnly": undefined,
   "title": "notString",
-  "type": Array [
+  "type": [
     "string",
     "integer",
     "null",
@@ -57,23 +57,23 @@ Object {
   "writeOnly": undefined,
   "x-circular-ref": undefined,
   "x-displayName": "notString",
-  "x-parentRefs": Array [],
+  "x-parentRefs": [],
 }
 `;
 
 exports[`Models Schema schemaDefinition should resolve schema with conditional operators 1`] = `
-Object {
+{
   "allOf": undefined,
   "description": undefined,
   "maxItems": 2,
-  "properties": Object {
+  "properties": {
-    "test": Object {
+    "test": {
       "allOf": undefined,
       "description": "The list of URL to a cute photos featuring pet",
-      "enum": Array [
+      "enum": [
         10,
       ],
-      "items": Object {
+      "items": {
         "allOf": undefined,
         "description": undefined,
         "format": "url",
@@ -82,21 +82,21 @@ Object {
         "type": "string",
         "writeOnly": undefined,
         "x-circular-ref": undefined,
-        "x-parentRefs": Array [],
+        "x-parentRefs": [],
       },
       "maxItems": 20,
       "minItems": 1,
       "readOnly": undefined,
       "title": undefined,
-      "type": Array [
+      "type": [
         "string",
         "integer",
         "null",
       ],
       "writeOnly": undefined,
       "x-circular-ref": undefined,
-      "x-parentRefs": Array [],
+      "x-parentRefs": [],
-      "x-refsStack": Array [
+      "x-refsStack": [
         "/oneOf/0",
       ],
     },
@@ -106,30 +106,30 @@ Object {
   "type": "object",
   "writeOnly": undefined,
   "x-circular-ref": undefined,
-  "x-parentRefs": Array [],
+  "x-parentRefs": [],
 }
 `;
 
 exports[`Models Schema schemaDefinition should resolve schema with conditional operators 2`] = `
-Object {
+{
   "allOf": undefined,
   "description": undefined,
   "maxItems": 20,
-  "properties": Object {
+  "properties": {
-    "test": Object {
+    "test": {
       "description": "The list of URL to a cute photos featuring pet",
-      "items": Object {
+      "items": {
         "format": "url",
         "type": "string",
       },
       "maxItems": 20,
       "minItems": 1,
-      "type": Array [
+      "type": [
         "string",
         "integer",
         "null",
       ],
-      "x-refsStack": Array [
+      "x-refsStack": [
         "/oneOf/1",
       ],
     },
@@ -139,6 +139,6 @@ Object {
   "type": "object",
   "writeOnly": undefined,
   "x-circular-ref": undefined,
-  "x-parentRefs": Array [],
+  "x-parentRefs": [],
 }
 `;

src/services/models/ApiInfo.ts

@@ -1,5 +1,6 @@
 import type { OpenAPIContact, OpenAPIInfo, OpenAPILicense } from '../../types';
 import { IS_BROWSER } from '../../utils/';
+import { l } from '../Labels';
 import type { OpenAPIParser } from '../OpenAPIParser';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 
@@ -13,7 +14,10 @@ export class ApiInfoModel implements OpenAPIInfo {
   contact?: OpenAPIContact;
   license?: OpenAPILicense;
 
-  downloadLink?: string;
+  downloadUrls: {
+    title?: string;
+    url?: string;
+  }[];
   downloadFileName?: string;
 
   constructor(
@@ -29,13 +33,28 @@ export class ApiInfoModel implements OpenAPIInfo {
       this.description = this.description.substring(0, firstHeadingLinePos);
     }
 
-    this.downloadLink = this.getDownloadLink();
+    this.downloadUrls = this.getDownloadUrls();
     this.downloadFileName = this.getDownloadFileName();
   }
+  private getDownloadUrls() {
+    return (
+      !this.options.downloadUrls
+        ? [
+            {
+              title: l('download'),
+              url: this.getDownloadLink(this.options.downloadDefinitionUrl),
+            },
+          ]
+        : this.options.downloadUrls.map(({ title, url }) => ({
+            title: title || l('download'),
+            url: this.getDownloadLink(url),
+          }))
+    ).filter(({ title, url }) => title && url);
+  }
 
-  private getDownloadLink(): string | undefined {
+  private getDownloadLink(url?: string): string | undefined {
-    if (this.options.downloadDefinitionUrl) {
+    if (url) {
-      return this.options.downloadDefinitionUrl;
+      return url;
     }
 
     if (this.parser.specUrl) {

src/services/models/MediaType.ts

@@ -14,7 +14,7 @@ export class MediaTypeModel {
   name: string;
   isRequestType: boolean;
   onlyRequiredInSamples: boolean;
-  generatedPayloadSamplesMaxDepth: number;
+  generatedSamplesMaxDepth: number;
 
   /**
    * @param isRequestType needed to know if skipe RO/RW fields in objects
@@ -30,7 +30,7 @@ export class MediaTypeModel {
     this.isRequestType = isRequestType;
     this.schema = info.schema && new SchemaModel(parser, info.schema, '', options);
     this.onlyRequiredInSamples = options.onlyRequiredInSamples;
-    this.generatedPayloadSamplesMaxDepth = options.generatedPayloadSamplesMaxDepth;
+    this.generatedSamplesMaxDepth = options.generatedSamplesMaxDepth;
     if (info.examples !== undefined) {
       this.examples = mapValues(
         info.examples,
@@ -55,7 +55,7 @@ export class MediaTypeModel {
       skipReadOnly: this.isRequestType,
       skipWriteOnly: !this.isRequestType,
       skipNonRequired: this.isRequestType && this.onlyRequiredInSamples,
-      maxSampleDepth: this.generatedPayloadSamplesMaxDepth,
+      maxSampleDepth: this.generatedSamplesMaxDepth,
     };
     if (this.schema && this.schema.oneOf) {
       this.examples = {};

src/services/models/Operation.ts

@@ -20,7 +20,12 @@ import { RequestBodyModel } from './RequestBody';
 import { ResponseModel } from './Response';
 import { SideNavStyleEnum } from '../types';
 
-import type { OpenAPIExternalDocumentation, OpenAPIServer, OpenAPIXCodeSample } from '../../types';
+import type {
+  OpenAPIExternalDocumentation,
+  OpenAPIServer,
+  OpenAPIXBadges,
+  OpenAPIXCodeSample,
+} from '../../types';
 import type { OpenAPIParser } from '../OpenAPIParser';
 import type { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import type { MediaContentModel } from './MediaContent';
@@ -71,6 +76,7 @@ export class OperationModel implements IMenuItem {
   operationId?: string;
   operationHash?: string;
   httpVerb: string;
+  badges: OpenAPIXBadges[];
   deprecated: boolean;
   path: string;
   servers: OpenAPIServer[];
@@ -112,6 +118,12 @@ export class OperationModel implements IMenuItem {
         : options.sideNavStyle === SideNavStyleEnum.PathOnly
         ? this.path
         : this.name;
+    this.badges =
+      operationSpec['x-badges']?.map(({ name, color, position }) => ({
+        name,
+        color: color,
+        position: position || 'after',
+      })) || [];
 
     if (this.isCallback) {
       // NOTE: Callbacks by default should not inherit the specification's global `security` definition.
@@ -195,6 +207,7 @@ export class OperationModel implements IMenuItem {
 
   @memoize
   get codeSamples() {
+    const { payloadSampleIdx, hideRequestPayloadSample } = this.options;
     let samples: Array<OpenAPIXCodeSample | XPayloadSample> =
       this.operationSpec['x-codeSamples'] || this.operationSpec['x-code-samples'] || [];
 
@@ -204,8 +217,8 @@ export class OperationModel implements IMenuItem {
     }
 
     const requestBodyContent = this.requestBody && this.requestBody.content;
-    if (requestBodyContent && requestBodyContent.hasSample) {
+    if (requestBodyContent && requestBodyContent.hasSample && !hideRequestPayloadSample) {
-      const insertInx = Math.min(samples.length, this.options.payloadSampleIdx);
+      const insertInx = Math.min(samples.length, payloadSampleIdx);
 
       samples = [
         ...samples.slice(0, insertInx),
@@ -234,7 +247,7 @@ export class OperationModel implements IMenuItem {
     if (this.options.sortPropsAlphabetically) {
       return sortByField(_parameters, 'name');
     }
-    if (this.options.requiredPropsFirst) {
+    if (this.options.sortRequiredPropsFirst) {
       return sortByRequired(_parameters);
     }
 

src/services/models/Schema.ts

@@ -65,6 +65,7 @@ export class SchemaModel {
   rawSchema: OpenAPISchema;
   schema: MergedOpenAPISchema;
   extensions?: Record<string, any>;
+  'x-enumDescriptions': { [name: string]: string };
   const: any;
   contentEncoding?: string;
   contentMediaType?: string;
@@ -122,6 +123,7 @@ export class SchemaModel {
     this.type = schema.type || detectType(schema);
     this.format = schema.format;
     this.enum = schema.enum || [];
+    this['x-enumDescriptions'] = schema['x-enumDescriptions'];
     this.example = schema.example;
     this.examples = schema.examples;
     this.deprecated = !!schema.deprecated;
@@ -221,6 +223,7 @@ export class SchemaModel {
       }
       if (this.items?.isPrimitive) {
         this.enum = this.items.enum;
+        this['x-enumDescriptions'] = this.items['x-enumDescriptions'];
       }
       if (isArray(this.type)) {
         const filteredType = this.type.filter(item => item !== 'array');
@@ -463,7 +466,7 @@ function buildFields(
   if (options.sortPropsAlphabetically) {
     fields = sortByField(fields, 'name');
   }
-  if (options.requiredPropsFirst) {
+  if (options.sortRequiredPropsFirst) {
     // if not sort alphabetically sort in the order from required keyword
     fields = sortByRequired(fields, !options.sortPropsAlphabetically ? schema.required : undefined);
   }

src/setupTests.ts

@@ -1,5 +1,8 @@
 import * as Enzyme from 'enzyme';
-import * as Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, { TextDecoder, TextEncoder });
 
 import 'raf/polyfill';
 

src/standalone.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { hydrate as hydrateComponent, render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { configure } from 'mobx';
 
 import { Redoc, RedocStandalone } from './components/';
@@ -59,7 +59,8 @@ export function init(
     spec = specOrSpecUrl;
   }
 
-  render(
+  const root = createRoot(element!);
+  root.render(
     React.createElement(
       RedocStandalone,
       {
@@ -70,13 +71,12 @@ export function init(
       },
       ['Loading...'],
     ),
-    element,
   );
 }
 
 export function destroy(element: Element | null = querySelector('redoc')): void {
   if (element) {
-    unmountComponentAtNode(element);
+    createRoot(element).unmount();
   }
 }
 
@@ -91,7 +91,7 @@ export function hydrate(
 
   setTimeout(() => {
     debugTime('Redoc hydrate');
-    hydrateComponent(<Redoc store={store} />, element, callback);
+    hydrateRoot(element!, <Redoc store={store} />, { onRecoverableError: callback });
     debugTimeEnd('Redoc hydrate');
   }, 0);
 }