fix(json-schema-2020-12): fix in collapsible behavior

Refs #8513

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

@@ -52,12 +52,13 @@ const JSONSchema = ({ schema, name }) => {
   /**
    * Event handlers.
    */
-  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
+  const handleExpansion = useCallback((e, expandedNew) => {
+    setExpanded(expandedNew)
+    !expandedNew && setExpandedDeeply(false)
   }, [])
-  const handleExpansionDeep = useCallback(() => {
-    setExpanded((prev) => !prev)
-    setExpandedDeeply((prev) => !prev)
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
   }, [])
 
   /**

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

@@ -18,8 +18,8 @@
   }
 
   &-body {
+    @include expansion-border;
     margin: 2px 0;
-    border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
   }
 
   &__limit {

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

@@ -1,3 +1,8 @@
+@mixin expansion-border {
+  margin: 0 0 0 20px;
+  border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
+}
+
 @import './JSONSchema/json-schema';
 @import './Accordion/accordion';
 @import './ExpandDeepButton/expand-deep-button';

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

@@ -1,9 +1,8 @@
 .json-schema-2020-12 {
   &__\$defs {
     & ul {
+      @include expansion-border;
       padding: 0;
-      margin: 0 0 0 20px;
-      border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
     }
   }
 

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

@@ -1,8 +1,7 @@
 .json-schema-2020-12 {
   &__\$vocabulary {
     ul {
-      margin: 0 0 0 20px;
-      border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
+      @include expansion-border;
     }
   }
 

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

@@ -1,9 +1,10 @@
 .json-schema-2020-12 {
   &__allOf {
-    & ul {
+    margin: 5px 0 5px 0;
+
+    & > ul {
+      @include expansion-border;
       padding: 0;
-      margin: 0 0 0 20px;
-      border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
     }
   }