feat(json-schema-2020-12): add support for defaultExpandedLevels opt

optimizeExpansion config option was introduced as well
to support rendering extensive or very complex schemas.

Refs #8513

src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx

@@ -9,6 +9,7 @@ import * as propTypes from "../../prop-types"
 import {
   useComponent,
   useLevel,
+  useConfig,
   useFn,
   useIsEmbedded,
   useIsExpandedDeeply,
@@ -23,6 +24,7 @@ import {
 
 const JSONSchema = forwardRef(({ schema, name }, ref) => {
   const fn = useFn()
+  const config = useConfig()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -120,43 +122,49 @@ const JSONSchema = forwardRef(({ schema, name }, ref) => {
               <KeywordType schema={schema} isCircular={isCircular} />
               <KeywordFormat schema={schema} />
             </div>
-            {expanded && (
+            <div
-              <div className="json-schema-2020-12-body">
+              className={classNames("json-schema-2020-12-body", {
-                <KeywordDescription schema={schema} />
+                "json-schema-2020-12-body--collapsed": !expanded,
-                {!isCircular && isExpandable && (
+              })}
-                  <>
+            >
-                    <KeywordProperties schema={schema} />
+              {!expanded && config.optimizeExpansion ? null : (
-                    <KeywordPatternProperties schema={schema} />
+                <>
-                    <KeywordAdditionalProperties schema={schema} />
+                  <KeywordDescription schema={schema} />
-                    <KeywordUnevaluatedProperties schema={schema} />
+                  {!isCircular && isExpandable && (
-                    <KeywordPropertyNames schema={schema} />
+                    <>
-                    <KeywordAllOf schema={schema} />
+                      <KeywordProperties schema={schema} />
-                    <KeywordAnyOf schema={schema} />
+                      <KeywordPatternProperties schema={schema} />
-                    <KeywordOneOf schema={schema} />
+                      <KeywordAdditionalProperties schema={schema} />
-                    <KeywordNot schema={schema} />
+                      <KeywordUnevaluatedProperties schema={schema} />
-                    <KeywordIf schema={schema} />
+                      <KeywordPropertyNames schema={schema} />
-                    <KeywordThen schema={schema} />
+                      <KeywordAllOf schema={schema} />
-                    <KeywordElse schema={schema} />
+                      <KeywordAnyOf schema={schema} />
-                    <KeywordDependentSchemas schema={schema} />
+                      <KeywordOneOf schema={schema} />
-                    <KeywordPrefixItems schema={schema} />
+                      <KeywordNot schema={schema} />
-                    <KeywordItems schema={schema} />
+                      <KeywordIf schema={schema} />
-                    <KeywordUnevaluatedItems schema={schema} />
+                      <KeywordThen schema={schema} />
-                    <KeywordContains schema={schema} />
+                      <KeywordElse schema={schema} />
-                  </>
+                      <KeywordDependentSchemas schema={schema} />
-                )}
+                      <KeywordPrefixItems schema={schema} />
-                <Keyword$schema schema={schema} />
+                      <KeywordItems schema={schema} />
-                <Keyword$vocabulary schema={schema} />
+                      <KeywordUnevaluatedItems schema={schema} />
-                <Keyword$id schema={schema} />
+                      <KeywordContains schema={schema} />
-                <Keyword$anchor schema={schema} />
+                    </>
-                <Keyword$dynamicAnchor schema={schema} />
+                  )}
-                <Keyword$ref schema={schema} />
+                  <Keyword$schema schema={schema} />
-                {!isCircular && isExpandable && (
+                  <Keyword$vocabulary schema={schema} />
-                  <Keyword$defs schema={schema} />
+                  <Keyword$id schema={schema} />
-                )}
+                  <Keyword$anchor schema={schema} />
-                <Keyword$dynamicRef schema={schema} />
+                  <Keyword$dynamicAnchor schema={schema} />
-                <Keyword$comment schema={schema} />
+                  <Keyword$ref schema={schema} />
-              </div>
+                  {!isCircular && isExpandable && (
-            )}
+                    <Keyword$defs schema={schema} />
+                  )}
+                  <Keyword$dynamicRef schema={schema} />
+                  <Keyword$comment schema={schema} />
+                </>
+              )}
+            </div>
           </article>
         </JSONSchemaCyclesContext.Provider>
       </JSONSchemaDeepExpansionContext.Provider>

src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss

@@ -20,6 +20,10 @@
   &-body {
     @include expansion-border;
     margin: 2px 0;
+
+    &--collapsed {
+      display: none;
+    }
   }
 
   &__limit {

src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx

@@ -2,18 +2,15 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { useConfig, useComponent, useIsExpandedDeeply } from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const $defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
-
+  const config = useConfig()
-  if (Object.keys($defs).length === 0) {
-    return null
-  }
-
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -32,6 +29,13 @@ const $defs = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (Object.keys($defs).length === 0) {
+    return null
+  }
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
@@ -42,15 +46,21 @@ const $defs = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <span className="json-schema-2020-12__type">object</span>
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {Object.entries($defs).map(([schemaName, schema]) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={schemaName} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema name={schemaName} schema={schema} />
+        >
-              </li>
+          {!expanded && config.optimizeExpansion ? null : (
-            ))}
+            <>
-          </ul>
+              {Object.entries($defs).map(([schemaName, schema]) => (
-        )}
+                <li key={schemaName} className="json-schema-2020-12-property">
+                  <JSONSchema name={schemaName} schema={schema} />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx

@@ -8,9 +8,6 @@ import { schema } from "../../../prop-types"
 import { useComponent, useIsExpandedDeeply } from "../../../hooks"
 
 const $vocabulary = ({ schema }) => {
-  if (!schema?.$vocabulary) return null
-  if (typeof schema.$vocabulary !== "object") return null
-
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const Accordion = useComponent("Accordion")
@@ -19,6 +16,12 @@ const $vocabulary = ({ schema }) => {
     setExpanded((prev) => !prev)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (!schema?.$vocabulary) return null
+  if (typeof schema.$vocabulary !== "object") return null
+
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
       <Accordion expanded={expanded} onChange={handleExpansion}>

src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx

@@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks"
 
 const AdditionalProperties = ({ schema }) => {
   const fn = useFn()
+  const { additionalProperties } = schema
+  const JSONSchema = useComponent("JSONSchema")
 
   if (!fn.hasKeyword(schema, "additionalProperties")) return null
 
-  const { additionalProperties } = schema
+  /**
-  const JSONSchema = useComponent("JSONSchema")
+   * Rendering.
+   */
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Additional properties

src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx

@@ -2,19 +2,21 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const AllOf = ({ schema }) => {
   const allOf = schema?.allOf || []
-
-  if (!Array.isArray(allOf) || allOf.length === 0) {
-    return null
-  }
-
   const fn = useFn()
+  const config = useConfig()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -34,6 +36,13 @@ const AllOf = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (!Array.isArray(allOf) || allOf.length === 0) {
+    return null
+  }
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf">
@@ -44,18 +53,24 @@ const AllOf = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <KeywordType schema={{ allOf }} />
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {allOf.map((schema, index) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={`#${index}`} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema
+        >
-                  name={`#${index} ${fn.getTitle(schema)}`}
+          {!expanded && config.optimizeExpansion ? null : (
-                  schema={schema}
+            <>
-                />
+              {allOf.map((schema, index) => (
-              </li>
+                <li key={`#${index}`} className="json-schema-2020-12-property">
-            ))}
+                  <JSONSchema
-          </ul>
+                    name={`#${index} ${fn.getTitle(schema)}`}
-        )}
+                    schema={schema}
+                  />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx

@@ -2,19 +2,21 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const AnyOf = ({ schema }) => {
   const anyOf = schema?.anyOf || []
-
-  if (!Array.isArray(anyOf) || anyOf.length === 0) {
-    return null
-  }
-
   const fn = useFn()
+  const config = useConfig()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -34,6 +36,13 @@ const AnyOf = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (!Array.isArray(anyOf) || anyOf.length === 0) {
+    return null
+  }
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf">
@@ -44,18 +53,24 @@ const AnyOf = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <KeywordType schema={{ anyOf }} />
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {anyOf.map((schema, index) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={`#${index}`} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema
+        >
-                  name={`#${index} ${fn.getTitle(schema)}`}
+          {!expanded && config.optimizeExpansion ? null : (
-                  schema={schema}
+            <>
-                />
+              {anyOf.map((schema, index) => (
-              </li>
+                <li key={`#${index}`} className="json-schema-2020-12-property">
-            ))}
+                  <JSONSchema
-          </ul>
+                    name={`#${index} ${fn.getTitle(schema)}`}
-        )}
+                    schema={schema}
+                  />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx

@@ -8,9 +8,6 @@ import { useFn, useComponent } from "../../hooks"
 
 const Contains = ({ schema }) => {
   const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "contains")) return null
-
   const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
@@ -18,6 +15,11 @@ const Contains = ({ schema }) => {
     </span>
   )
 
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "contains")) return null
+
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--contains">
       <JSONSchema name={name} schema={schema.contains} />

src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx

@@ -2,17 +2,15 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { useConfig, useComponent, useIsExpandedDeeply } from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const DependentSchemas = ({ schema }) => {
   const dependentSchemas = schema?.dependentSchemas || []
-
+  const config = useConfig()
-  if (typeof dependentSchemas !== "object") return null
-  if (Object.keys(dependentSchemas).length === 0) return null
-
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -31,6 +29,12 @@ const DependentSchemas = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (typeof dependentSchemas !== "object") return null
+  if (Object.keys(dependentSchemas).length === 0) return null
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas">
@@ -41,15 +45,21 @@ const DependentSchemas = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <span className="json-schema-2020-12__type">object</span>
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={schemaName} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema name={schemaName} schema={schema} />
+        >
-              </li>
+          {!expanded && config.optimizeExpansion ? null : (
-            ))}
+            <>
-          </ul>
+              {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
-        )}
+                <li key={schemaName} className="json-schema-2020-12-property">
+                  <JSONSchema name={schemaName} schema={schema} />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx

@@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks"
 
 const Else = ({ schema }) => {
   const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (!fn.hasKeyword(schema, "else")) return null
 
-  const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Else

src/core/plugins/json-schema-2020-12/components/keywords/If.jsx

@@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks"
 
 const If = ({ schema }) => {
   const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (!fn.hasKeyword(schema, "if")) return null
 
-  const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       If

src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx

@@ -7,9 +7,13 @@ import { schema } from "../../prop-types"
 import { useComponent } from "../../hooks"
 
 const Items = ({ schema }) => {
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
   if (!schema?.items) return null
 
-  const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Items

src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx

@@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks"
 
 const Not = ({ schema }) => {
   const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (!fn.hasKeyword(schema, "not")) return null
 
-  const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Not

src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx

@@ -2,19 +2,21 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const OneOf = ({ schema }) => {
   const oneOf = schema?.oneOf || []
-
-  if (!Array.isArray(oneOf) || oneOf.length === 0) {
-    return null
-  }
-
   const fn = useFn()
+  const config = useConfig()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -34,6 +36,13 @@ const OneOf = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (!Array.isArray(oneOf) || oneOf.length === 0) {
+    return null
+  }
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf">
@@ -44,18 +53,24 @@ const OneOf = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <KeywordType schema={{ oneOf }} />
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {oneOf.map((schema, index) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={`#${index}`} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema
+        >
-                  name={`#${index} ${fn.getTitle(schema)}`}
+          {!expanded && config.optimizeExpansion ? null : (
-                  schema={schema}
+            <>
-                />
+              {oneOf.map((schema, index) => (
-              </li>
+                <li key={`#${index}`} className="json-schema-2020-12-property">
-            ))}
+                  <JSONSchema
-          </ul>
+                    name={`#${index} ${fn.getTitle(schema)}`}
-        )}
+                    schema={schema}
+                  />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx

@@ -8,13 +8,15 @@ import { useComponent } from "../../../hooks"
 
 const PatternProperties = ({ schema }) => {
   const patternProperties = schema?.patternProperties || {}
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (Object.keys(patternProperties).length === 0) {
     return null
   }
 
-  const JSONSchema = useComponent("JSONSchema")
-
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
       <ul>

src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx

@@ -2,19 +2,21 @@
  * @prettier
  */
 import React, { useCallback, useState } from "react"
+import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const PrefixItems = ({ schema }) => {
   const prefixItems = schema?.prefixItems || []
-
-  if (!Array.isArray(prefixItems) || prefixItems.length === 0) {
-    return null
-  }
-
   const fn = useFn()
+  const config = useConfig()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
@@ -34,6 +36,13 @@ const PrefixItems = ({ schema }) => {
     setExpandedDeeply(expandedDeepNew)
   }, [])
 
+  /**
+   * Rendering.
+   */
+  if (!Array.isArray(prefixItems) || prefixItems.length === 0) {
+    return null
+  }
+
   return (
     <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
       <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--prefixItems">
@@ -44,18 +53,24 @@ const PrefixItems = ({ schema }) => {
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
         <KeywordType schema={{ prefixItems }} />
-        {expanded && (
+        <ul
-          <ul>
+          className={classNames("json-schema-2020-12-keyword__children", {
-            {prefixItems.map((schema, index) => (
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-              <li key={`#${index}`} className="json-schema-2020-12-property">
+          })}
-                <JSONSchema
+        >
-                  name={`#${index} ${fn.getTitle(schema)}`}
+          {!expanded && config.optimizeExpansion ? null : (
-                  schema={schema}
+            <>
-                />
+              {prefixItems.map((schema, index) => (
-              </li>
+                <li key={`#${index}`} className="json-schema-2020-12-property">
-            ))}
+                  <JSONSchema
-          </ul>
+                    name={`#${index} ${fn.getTitle(schema)}`}
-        )}
+                    schema={schema}
+                  />
+                </li>
+              ))}
+            </>
+          )}
+        </ul>
       </div>
     </JSONSchemaDeepExpansionContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx

@@ -8,13 +8,15 @@ import { useComponent } from "../../../hooks"
 
 const Properties = ({ schema }) => {
   const properties = schema?.properties || {}
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (Object.keys(properties).length === 0) {
     return null
   }
 
-  const JSONSchema = useComponent("JSONSchema")
-
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
       <ul>

src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx

@@ -8,9 +8,6 @@ import { useFn, useComponent } from "../../hooks"
 
 const PropertyNames = ({ schema }) => {
   const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "propertyNames")) return null
-
   const { propertyNames } = schema
   const JSONSchema = useComponent("JSONSchema")
   const name = (
@@ -19,6 +16,11 @@ const PropertyNames = ({ schema }) => {
     </span>
   )
 
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "propertyNames")) return null
+
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--propertyNames">
       <JSONSchema name={name} schema={propertyNames} />

src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx

@@ -8,10 +8,13 @@ import { useFn, useComponent } from "../../hooks"
 
 const Then = ({ schema }) => {
   const fn = useFn()
+  const JSONSchema = useComponent("JSONSchema")
 
+  /**
+   * Rendering.
+   */
   if (!fn.hasKeyword(schema, "then")) return null
 
-  const JSONSchema = useComponent("JSONSchema")
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Then

src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx

@@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks"
 
 const UnevaluatedItems = ({ schema }) => {
   const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "unevaluatedItems")) return null
-
   const { unevaluatedItems } = schema
   const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "unevaluatedItems")) return null
+
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Unevaluated items

src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx

@@ -8,11 +8,14 @@ import { useFn, useComponent } from "../../hooks"
 
 const UnevaluatedProperties = ({ schema }) => {
   const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "unevaluatedProperties")) return null
-
   const { unevaluatedProperties } = schema
   const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Rendering.
+   */
+  if (!fn.hasKeyword(schema, "unevaluatedProperties")) return null
+
   const name = (
     <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Unevaluated properties

src/core/plugins/json-schema-2020-12/components/keywords/_all.scss

@@ -1,9 +1,13 @@
 .json-schema-2020-12-keyword {
   margin: 5px 0 5px 0;
 
-  & > ul {
+  &__children {
     @include expansion-border;
     padding: 0;
+
+    &--collapsed {
+      display: none;
+    }
   }
 
   &__name {

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -88,6 +88,23 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
     },
     config: {
       default$schema: "https://json-schema.org/draft/2020-12/schema",
+      /**
+       * Defines an upper exclusive boundary of the level range for automatic expansion.
+       *
+       * 0 -> do nothing
+       * 1 -> [0]...(1)
+       * 2 -> [0]...(2)
+       * 3 -> [0]...(3)
+       */
+      defaultExpandedLevels: 0, // 2 = 0...2
+      /**
+       * Can be turned on for complex and extensive schemas.
+       * Child schemas are not rendered until parent schema is expanded.
+       *
+       * By default, entire schema tree is rendered and collapsed parts of the
+       * tree are hidden with css.
+       */
+      optimizeExpansion: false,
       ...overrides.config,
     },
     fn: {

src/core/plugins/json-schema-2020-12/hooks.js

@@ -39,7 +39,11 @@ export const useIsEmbedded = () => {
 }
 
 export const useIsExpandedDeeply = () => {
-  return useContext(JSONSchemaDeepExpansionContext)
+  const [level] = useLevel()
+  const { defaultExpandedLevels } = useConfig()
+  const isExpandedByDefault = defaultExpandedLevels - level > 0
+
+  return isExpandedByDefault || useContext(JSONSchemaDeepExpansionContext)
 }
 
 export const useRenderedSchemas = (schema = undefined) => {

src/core/plugins/oas31/components/models.jsx

@@ -15,6 +15,7 @@ const Models = ({
   fn,
 }) => {
   const schemas = specSelectors.selectSchemas()
+  const hasSchemas = Object.keys(schemas).length > 0
   const schemasPath = ["components", "schemas"]
   const { docExpansion, defaultModelsExpandDepth } = getConfigs()
   const isOpenDefault = defaultModelsExpandDepth > 0 && docExpansion !== "none"
@@ -34,15 +35,19 @@ const Models = ({
   /**
    * Event handlers.
    */
+
   const handleCollapse = useCallback(() => {
     layoutActions.show(schemasPath, !isOpen)
-  }, [layoutActions, schemasPath, isOpen])
+  }, [isOpen, layoutActions])
 
-  const handleModelsRef = useCallback((node) => {
+  const handleModelsRef = useCallback(
-    if (node !== null) {
+    (node) => {
-      layoutActions.readyToScroll(schemasPath, node)
+      if (node !== null) {
-    }
+        layoutActions.readyToScroll(schemasPath, node)
-  }, [])
+      }
+    },
+    [layoutActions]
+  )
 
   const handleJSONSchema202012Ref = (schemaName) => (node) => {
     if (node !== null) {
@@ -50,6 +55,14 @@ const Models = ({
     }
   }
 
+  /**
+   * Rendering.
+   */
+
+  if (!hasSchemas || defaultModelsExpandDepth < 0) {
+    return null
+  }
+
   return (
     <section
       className={classNames("models", { "is-open": isOpen })}
@@ -86,6 +99,7 @@ Models.propTypes = {
   getConfigs: PropTypes.func.isRequired,
   specSelectors: PropTypes.shape({
     selectSchemas: PropTypes.func.isRequired,
+    specResolvedSubtree: PropTypes.func.isRequired,
   }).isRequired,
   specActions: PropTypes.shape({
     requestResolvedSubtree: PropTypes.func.isRequired,
@@ -95,6 +109,7 @@ Models.propTypes = {
   }).isRequired,
   layoutActions: PropTypes.shape({
     show: PropTypes.func.isRequired,
+    readyToScroll: PropTypes.func.isRequired,
   }).isRequired,
   fn: PropTypes.shape({
     upperFirst: PropTypes.func.isRequired,

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

@@ -6,7 +6,8 @@ import React from "react"
 import { createOnlyOAS31ComponentWrapper } from "../fn"
 
 const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
-  const { getComponent, fn } = getSystem()
+  const { getComponent, fn, getConfigs } = getSystem()
+  const configs = getConfigs()
 
   if (ModelsWrapper.ModelsWithJSONContext) {
     return <ModelsWrapper.ModelsWithJSONContext />
@@ -61,7 +62,6 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
     "JSONSchema202012KeywordDescription",
     true
   )
-
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -70,6 +70,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   ModelsWrapper.ModelsWithJSONContext = withSchemaContext(Models, {
     config: {
       default$schema: "https://spec.openapis.org/oas/3.1/dialect/base",
+      defaultExpandedLevels: configs.defaultModelsExpandDepth - 1,
     },
     components: {
       JSONSchema,