From f41c6ba0d7b5dff4ca9c46e073e47b58109eb844 Mon Sep 17 00:00:00 2001
From: Vladimir Gorej <vladimir.gorej@gmail.com>
Date: Fri, 21 Apr 2023 08:22:42 +0200
Subject: [PATCH] fix(json-schema-2020-12): fix in collapsible behavior

Refs #8513
---
 .../components/JSONSchema/JSONSchema.jsx              | 11 ++++++-----
 .../components/JSONSchema/_json-schema.scss           |  2 +-
 .../plugins/json-schema-2020-12/components/_all.scss  |  5 +++++
 .../components/keywords/$defs/_$defs.scss             |  3 +--
 .../components/keywords/$vocabulary/_$vocabulary.scss |  3 +--
 .../components/keywords/AllOf/_all-of.scss            |  7 ++++---
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
index 114fdb19..4c3c043b 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
+++ b/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)
   }, [])
 
   /**
diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
index bb9ffffe..7b64689d 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
+++ b/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 {
diff --git a/src/core/plugins/json-schema-2020-12/components/_all.scss b/src/core/plugins/json-schema-2020-12/components/_all.scss
index 6a43cb62..355fa5e7 100644
--- a/src/core/plugins/json-schema-2020-12/components/_all.scss
+++ b/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';
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$defs/_$defs.scss b/src/core/plugins/json-schema-2020-12/components/keywords/$defs/_$defs.scss
index 3164b30b..1eccd561 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/$defs/_$defs.scss
+++ b/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);
     }
   }
 
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
index 8bb1f25b..1c47515b 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
+++ b/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;
     }
   }
 
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/AllOf/_all-of.scss b/src/core/plugins/json-schema-2020-12/components/keywords/AllOf/_all-of.scss
index aae4c3f9..7c425b5d 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/AllOf/_all-of.scss
+++ b/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);
     }
   }