feat(oas32): add basic OpenAPI 3.2.0 support

CLAUDE.md

@@ -124,6 +124,7 @@ Swagger UI uses a **sophisticated plugin system** powered by Redux. The core sys
 - `logs` - Logging
 - `oas3` - OpenAPI 3.0.x support
 - `oas31` - OpenAPI 3.1.x support
+- `oas32` - OpenAPI 3.2.x support
 - `on-complete` - Completion callbacks
 - `request-snippets` - Code snippet generation
 - `safe-render` - Safe component rendering
@@ -813,6 +814,7 @@ dist/                            # Build output (generated)
 - OAS 2.0: Use `src/core/plugins/swagger-client/`
 - OAS 3.0.x: Use `src/core/plugins/oas3/`
 - OAS 3.1.x: Use `src/core/plugins/oas31/`
+- OAS 3.2.x: Use `src/core/plugins/oas32/`
 
 **Adding Test Specs:**
 - Add to `test/e2e-cypress/static/documents/`

README.md

@@ -35,6 +35,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 | Swagger UI Version | Release Date | OpenAPI Spec compatibility                                  | Notes                                                                 |
 |--------------------|--------------|-------------------------------------------------------------|-----------------------------------------------------------------------|
+| 5.20.0             | TBD          | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.0.4, 3.1.0, 3.1.1, 3.1.2, 3.2.0 | [next release](https://github.com/swagger-api/swagger-ui/tree/master)  |
 | 5.19.0             | 2025-02-17   | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.0.4, 3.1.0, 3.1.1, 3.1.2 | [tag v5.19.0](https://github.com/swagger-api/swagger-ui/tree/v5.19.0) |
 | 5.0.0              | 2023-06-12   | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.1.0               | [tag v5.0.0](https://github.com/swagger-api/swagger-ui/tree/v5.0.0)   |
 | 4.0.0              | 2021-11-03   | 2.0, 3.0.0, 3.0.1, 3.0.2, 3.0.3                      | [tag v4.0.0](https://github.com/swagger-api/swagger-ui/tree/v4.0.0)   |

src/core/components/layouts/base.jsx

@@ -34,6 +34,7 @@ export default class BaseLayout extends React.Component {
     const isSwagger2 = specSelectors.isSwagger2()
     const isOAS3 = specSelectors.isOAS3()
     const isOAS31 = specSelectors.isOAS31()
+    const isOAS32 = specSelectors.isOAS32()
 
     const isSpecEmpty = !specSelectors.specStr()
 
@@ -100,6 +101,8 @@ export default class BaseLayout extends React.Component {
         <VersionPragmaFilter
           isSwagger2={isSwagger2}
           isOAS3={isOAS3}
+          isOAS31={isOAS31}
+          isOAS32={isOAS32}
           alsoShow={<Errors />}
         >
           <Errors />

src/core/containers/OperationContainer.jsx

@@ -93,11 +93,11 @@ export default class OperationContainer extends PureComponent {
   componentDidUpdate(prevProps) {
     const { response, isShown } = this.props
     const resolvedSubtree = this.getResolvedSubtree()
-  
+
     if (response !== prevProps.response) {
       this.setState({ executeInProgress: false })
     }
-  
+
     if (isShown && resolvedSubtree === undefined && !prevProps.isShown) {
       this.requestResolvedSubtree()
     }
@@ -132,7 +132,7 @@ export default class OperationContainer extends PureComponent {
           jsonRequestBodyValue[key] = jsonRequestBodyValue[key].map((val) => {
             if (typeof val === "object") {
               return JSON.stringify(val, null, 2)
-            } 
+            }
             return val
           })
         } else if (typeof value === "object") {

src/core/plugins/oas31/components/version-pragma-filter.jsx

@@ -26,9 +26,9 @@ const VersionPragmaFilter = ({
               one of the fields.
             </p>
             <p>
-              Supported version fields are <code>swagger: &quot;2.0&quot;</code> and
-              those that match <code>openapi: 3.x.y</code> (for example,{" "}
-              <code>openapi: 3.1.0</code>).
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code>,{" "}
+              <code>openapi: 3.0.x</code>, or <code>openapi: 3.1.x</code> (for
+              example, <code>openapi: 3.1.0</code>).
             </p>
           </div>
         </div>
@@ -48,9 +48,9 @@ const VersionPragmaFilter = ({
             </p>
             <p>
               Please indicate a valid Swagger or OpenAPI version field.
-              Supported version fields are <code>swagger: &quot;2.0&quot;</code> and
-              those that match <code>openapi: 3.x.y</code> (for example,{" "}
-              <code>openapi: 3.1.0</code>).
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code>,{" "}
+              <code>openapi: 3.0.x</code>, or <code>openapi: 3.1.x</code> (for
+              example, <code>openapi: 3.1.0</code>).
             </p>
           </div>
         </div>

src/core/plugins/oas31/wrap-components/contact.jsx

@@ -3,13 +3,17 @@
  */
 import React from "react"
 
-import { createOnlyOAS31ComponentWrapper } from "../fn"
+const ContactWrapper = (Original, system) => (props) => {
+  const isOAS31 = system.specSelectors.isOAS31?.() || false
+  const isOAS32 = system.specSelectors.isOAS32?.() || false
 
-const ContactWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
-  const system = getSystem()
-  const OAS31Contact = system.getComponent("OAS31Contact", true)
+  // Use OAS31Contact for both OAS 3.1 and OAS 3.2 specs
+  if (isOAS31 || isOAS32) {
+    const OAS31Contact = system.getComponent("OAS31Contact", true)
+    return <OAS31Contact {...props} />
+  }
 
-  return <OAS31Contact />
-})
+  return <Original {...props} />
+}
 
 export default ContactWrapper

src/core/plugins/oas31/wrap-components/license.jsx

@@ -3,13 +3,17 @@
  */
 import React from "react"
 
-import { createOnlyOAS31ComponentWrapper } from "../fn"
+const LicenseWrapper = (Original, system) => (props) => {
+  const isOAS31 = system.specSelectors.isOAS31?.() || false
+  const isOAS32 = system.specSelectors.isOAS32?.() || false
 
-const LicenseWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
-  const system = getSystem()
-  const OAS31License = system.getComponent("OAS31License", true)
+  // Use OAS31License for both OAS 3.1 and OAS 3.2 specs
+  if (isOAS31 || isOAS32) {
+    const OAS31License = system.getComponent("OAS31License", true)
+    return <OAS31License {...props} />
+  }
 
-  return <OAS31License />
-})
+  return <Original {...props} />
+}
 
 export default LicenseWrapper

src/core/plugins/oas32/after-load.js

@@ -0,0 +1,23 @@
+/**
+ * @prettier
+ */
+
+/**
+ * afterLoad hook for OAS 3.2 plugin
+ *
+ * This hook runs after all plugins are loaded and allows
+ * modification of the system's functions and behaviors.
+ *
+ * OAS 3.2 is a minor version update with backward-compatible additions,
+ * so minimal modifications are needed.
+ */
+function afterLoad() {
+  // TODO: OAS 3.2 should use the new JSON Schema version from
+  // https://spec.openapis.org/oas/3.2/schema/2025-09-17.html
+  // Currently using JSON Schema 2020-12 from OAS 3.1 for basic implementation.
+  // This needs to be updated to properly support OAS 3.2 schema validation.
+  // Future: If any function wrapping is needed for OAS 3.2 specific behavior,
+  // it can be added here using wrapOAS32Fn
+}
+
+export default afterLoad

src/core/plugins/oas32/components/info.jsx

@@ -0,0 +1,99 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils/url"
+
+const Info = ({ getComponent, specSelectors }) => {
+  const version = specSelectors.version()
+  const url = specSelectors.url()
+  const basePath = specSelectors.basePath()
+  const host = specSelectors.host()
+  const summary = specSelectors.selectInfoSummaryField()
+  const description = specSelectors.selectInfoDescriptionField()
+  const title = specSelectors.selectInfoTitleField()
+  const termsOfServiceUrl = specSelectors.selectInfoTermsOfServiceUrl()
+  const externalDocsUrl = specSelectors.selectExternalDocsUrl()
+  const externalDocsDesc = specSelectors.selectExternalDocsDescriptionField()
+  const contact = specSelectors.contact()
+  const license = specSelectors.license()
+
+  const Markdown = getComponent("Markdown", true)
+  const Link = getComponent("Link")
+  const VersionStamp = getComponent("VersionStamp")
+  const OpenAPIVersion = getComponent("OpenAPIVersion")
+  const InfoUrl = getComponent("InfoUrl")
+  const InfoBasePath = getComponent("InfoBasePath")
+  const License = getComponent("License", true)
+  const Contact = getComponent("Contact", true)
+  const JsonSchemaDialect = getComponent("JsonSchemaDialect", true)
+
+  return (
+    <div className="info">
+      <hgroup className="main">
+        <h1 className="title">
+          {title}
+          <span>
+            {version && <VersionStamp version={version} />}
+            <OpenAPIVersion oasVersion="3.2" />
+          </span>
+        </h1>
+
+        {(host || basePath) && <InfoBasePath host={host} basePath={basePath} />}
+        {url && <InfoUrl getComponent={getComponent} url={url} />}
+      </hgroup>
+
+      {summary && <p className="info__summary">{summary}</p>}
+
+      <div className="info__description description">
+        <Markdown source={description} />
+      </div>
+
+      {termsOfServiceUrl && (
+        <div className="info__tos">
+          <Link target="_blank" href={sanitizeUrl(termsOfServiceUrl)}>
+            Terms of service
+          </Link>
+        </div>
+      )}
+
+      {contact.size > 0 && <Contact />}
+
+      {license.size > 0 && <License />}
+
+      {externalDocsUrl && (
+        <Link
+          className="info__extdocs"
+          target="_blank"
+          href={sanitizeUrl(externalDocsUrl)}
+        >
+          {externalDocsDesc || externalDocsUrl}
+        </Link>
+      )}
+
+      <JsonSchemaDialect />
+    </div>
+  )
+}
+
+Info.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    version: PropTypes.func.isRequired,
+    url: PropTypes.func.isRequired,
+    basePath: PropTypes.func.isRequired,
+    host: PropTypes.func.isRequired,
+    selectInfoSummaryField: PropTypes.func.isRequired,
+    selectInfoDescriptionField: PropTypes.func.isRequired,
+    selectInfoTitleField: PropTypes.func.isRequired,
+    selectInfoTermsOfServiceUrl: PropTypes.func.isRequired,
+    selectExternalDocsUrl: PropTypes.func.isRequired,
+    selectExternalDocsDescriptionField: PropTypes.func.isRequired,
+    contact: PropTypes.func.isRequired,
+    license: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default Info

src/core/plugins/oas32/components/version-pragma-filter.jsx

@@ -0,0 +1,80 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+const VersionPragmaFilter = ({
+  bypass,
+  isSwagger2,
+  isOAS3,
+  isOAS31,
+  isOAS32,
+  alsoShow,
+  children,
+}) => {
+  if (bypass) {
+    return <div>{children}</div>
+  }
+
+  if (isSwagger2 && (isOAS3 || isOAS31 || isOAS32)) {
+    return (
+      <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--ambiguous">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>
+              <code>swagger</code> and <code>openapi</code> fields cannot be
+              present in the same Swagger or OpenAPI definition. Please remove
+              one of the fields.
+            </p>
+            <p>
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code>{" "}
+              and <code>openapi: 3.0.x</code>, <code>openapi: 3.1.x</code>, or{" "}
+              <code>openapi: 3.2.x</code> (for example,{" "}
+              <code>openapi: 3.2.0</code>).
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isSwagger2 && !isOAS3 && !isOAS31 && !isOAS32) {
+    return (
+      <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--missing">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>
+              The provided definition does not specify a valid version field.
+            </p>
+            <p>
+              Please indicate a valid Swagger or OpenAPI version field.
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code>{" "}
+              and <code>openapi: 3.0.x</code>, <code>openapi: 3.1.x</code>, or{" "}
+              <code>openapi: 3.2.x</code> (for example,{" "}
+              <code>openapi: 3.2.0</code>).
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <div>{children}</div>
+}
+
+VersionPragmaFilter.propTypes = {
+  isSwagger2: PropTypes.bool.isRequired,
+  isOAS3: PropTypes.bool.isRequired,
+  isOAS31: PropTypes.bool.isRequired,
+  isOAS32: PropTypes.bool.isRequired,
+  bypass: PropTypes.bool,
+  alsoShow: PropTypes.element,
+  children: PropTypes.any,
+}
+
+export default VersionPragmaFilter