#5980 Hide toolbox submenu on unhover button (#5984)

* #5980 Hide toolbox submenu on unhover button
Fixes #5980

* #5980 update screenshots

* #5980 fix hover button styles in rtl

* #5980 - update screenshots

* #5980 - update screenshots

* #5980 - fixed postcss

* fix toolbox subtype paddings

* fixed item group event bindings #5980

functionalTests/designer/toolbox.ts

@@ -355,6 +355,12 @@ test("toolbox subTypes: add items by drag-n-drop", async (t) => {
     .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool").find(".svc-toolbox__item-submenu-button"))
     .wait(400)
     .expect(toolboxSubTypesPopup.visible).ok()
+    .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool"))
+    .wait(400)
+    .expect(toolboxSubTypesPopup.visible).notOk()
+    .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool").find(".svc-toolbox__item-submenu-button"))
+    .wait(400)
+    .expect(toolboxSubTypesPopup.visible).ok()
 
     .hover(getSubToolboxItemByText("Smileys"), { speed: 0.1 })
     .wait(400)

packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html

@@ -1,7 +1,8 @@
 <ng-template #template>
   <svc-toolbox-item [model]="item" [viewModel]="viewModel" [creator]="creator" [isCompact]="isCompact"></svc-toolbox-item>
-  <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)">
+  <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)"
+    (mouseleave)="viewModel.onMouseLeave(item, $event)">
     <svg [iconName]="item.subitemsButtonIcon" [size]="16" sv-ng-svg-icon></svg>
+    <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
   </div>
-  <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
 </ng-template>

packages/survey-creator-angular/src/toolbox/toolbox-tool.component.html

@@ -2,9 +2,7 @@
     <div [class]="itemCssClasses">
         <div class="svc-toolbox__category-separator" *ngIf="item.needSeparator && !creator.toolbox.showCategoryTitles">
         </div>
-        <div class="svc-toolbox__tool-content sv-action__content" (pointerdown)="model.onPointerDown($event)"
-            (mouseover)="model.onMouseOverTool(item, $event)"
-        (mouseleave)="model.onMouseLeave(item, $event)">
+        <div class="svc-toolbox__tool-content sv-action__content" (pointerdown)="model.onPointerDown($event)">
             <ng-template [component]="{ name: model.itemComponent, default: 'svc-toolbox-item', 
             data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }"></ng-template>
         </div>

packages/survey-creator-core/creator-themes-import.js

@@ -22,8 +22,9 @@ var themeConstants = {
     "--ctr-toolbox-scrollbar-right": "0",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
+    "--ctr-toolbox-item-submenu-button-top": "12px",
     "--ctr-toolbox-item-align": "stretch",
-    "--ctr-toolbox-submenu-offset": "13px",
+    "--ctr-toolbox-submenu-offset": "20px",
     "--ctr-toolbox-width-compact": "72px",
     "--ctr-toolbox-margin-left-compact": "0px",
     "--ctr-toolbox-separator-width": "208px",

packages/survey-creator-core/src/components/toolbox/toolbox-right.scss

@@ -12,7 +12,9 @@
     }
   }
   .svc-toolbox__item-submenu-button {
+    svg {
       transform: rotate(180deg);
+    }  
   }
 }
 .svc-creator__toolbox--right {

packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss

@@ -110,12 +110,12 @@
     border-top-color: transparent;
     border-inline-end-color: transparent;
     box-shadow:
-    var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
-      var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px)
-      var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)),
-    var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
-      var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
-      var(--ctr-tooltip-shadow-2-color, transparent);
+      var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
+        var(--ctr-tooltip-shadow-1-blur, 6px) var(--ctr-tooltip-shadow-1-spread, 0px)
+        var(--ctr-tooltip-shadow-1-color, rgba(0, 0, 0, 0.1)),
+      var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
+        var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
+        var(--ctr-tooltip-shadow-2-color, transparent);
     align-self: center;
     position: absolute;
     inset-inline-end: 100%;
@@ -124,7 +124,6 @@
     clip-path: polygon(-100% -100%, -100% 200%, 200% 200%);
   }
 
-
   .sv-svg-icon use {
     fill: var(--ctr-toolbox-item-icon-color-hovered, $primary);
   }
@@ -151,11 +150,11 @@
     //   padding-inline-start: calcSize(4);
     // }
   }
-  .svc-toolbox__item-submenu-button {
-    background: var(--ctr-toolbox-item-submenu-button-background-color, $background-dim);
-    &:hover {
-      background: var(--ctr-toolbox-item-submenu-button-background-color-hovered, $background);
-    }
+}
+.svc-toolbox__item-submenu-button {
+  background: var(--ctr-toolbox-item-submenu-button-background-color, $background-dim);
+  &:hover {
+    background: var(--ctr-toolbox-item-submenu-button-background-color-hovered, $background);
   }
 }
 
@@ -218,7 +217,7 @@
 .svc-toolbox__item-submenu-button {
   position: absolute;
   inset-inline-end: var(--ctr-toolbox-item-submenu-button-right, calcSize(1.5));
-  top: calcSize(1.5);
+  top: var(--ctr-toolbox-item-submenu-button-top, calcSize(1.5));
   display: inline-flex;
   padding: var(--ctr-toolbox-item-submenu-button-padding-top, 4px)
     var(--ctr-toolbox-item-submenu-button-padding-right, 4px) var(--ctr-toolbox-item-submenu-button-padding-bottom, 4px)
@@ -228,7 +227,7 @@
   box-sizing: border-box;
   align-items: center;
   border-radius: var(--ctr-toolbox-item-submenu-button-corner-radius, 1024px);
-  z-index: 20;
+  z-index: 40;
   svg {
     fill: var(--ctr-toolbox-item-submenu-button-icon-color, $layer-1-foreground-50);
   }
@@ -276,8 +275,13 @@
 
 .svc-toolbox-subtypes {
   .sv-popup__container {
+    --toolbox-item-padding-top: calc(1 * #{$base-unit});
+    margin-top: calc(
+      0px - var(--ctr-toolbox-submenu-group-margin-top, 0px) -
+        var(--ctr-toolbox-item-padding-top, var(--toolbox-item-padding-top))
+    );
     padding: 0;
-    padding-inline-start: var(--ctr-toolbox-submenu-offset, calcSize(0.5));
+    padding-inline-start: var(--ctr-toolbox-submenu-offset, calcSize(3.5));
     box-shadow: unset;
     background: unset;
   }
@@ -301,10 +305,10 @@
   }
 
   .sv-popup__scrolling-content {
-    padding-top: calc(var(--ctr-toolbox-submenu-group-margin-top, 12px));
-    padding-inline-end: var(--ctr-toolbox-submenu-group-margin-right, 12px);
-    padding-bottom: var(--ctr-toolbox-submenu-group-margin-bottom-last, 12px);
-    padding-inline-start: var(--ctr-toolbox-submenu-group-margin-left, 12px);
+    padding-top: calc(var(--ctr-toolbox-submenu-group-margin-top, 0px));
+    padding-inline-end: var(--ctr-toolbox-submenu-group-margin-right, 0px);
+    padding-bottom: var(--ctr-toolbox-submenu-group-margin-bottom-last, 0px);
+    padding-inline-start: var(--ctr-toolbox-submenu-group-margin-left, 0px);
     overflow: visible;
   }
 

packages/survey-creator-core/src/components/toolbox/toolbox-tool.ts

@@ -53,9 +53,6 @@ export class ToolboxToolViewModel extends Base {
   public onMouseOver(itemValue, mouseoverEvent) {
     this.model.mouseOverHandler(itemValue);
   }
-  public onMouseOverTool(itemValue, mouseoverEvent) {
-    if (itemValue.popupModel?.isVisible) this.onMouseOver(itemValue, mouseoverEvent);
-  }
 
   public onMouseLeave(itemValue, mouseoverEvent) {
     itemValue.hidePopupDelayed(this.creator.toolbox.subItemsHideDelay);

packages/survey-creator-core/src/components/toolbox/toolbox.scss

@@ -205,7 +205,6 @@ svc-toolbox {
 .svc-toolbox__search-container {
   position: sticky;
   top: 0;
-  z-index: 30;
   display: none;
   flex-direction: column;
   box-sizing: border-box;

packages/survey-creator-core/src/themes/default.ts

@@ -5,8 +5,9 @@ const Theme = {
     "--ctr-toolbox-scrollbar-right": "0",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
+    "--ctr-toolbox-item-submenu-button-top": "12px",
     "--ctr-toolbox-item-align": "stretch",
-    "--ctr-toolbox-submenu-offset": "13px",
+    "--ctr-toolbox-submenu-offset": "20px",
     "--ctr-toolbox-width-compact": "72px",
     "--ctr-toolbox-margin-left-compact": "0px",
     "--ctr-toolbox-separator-width": "208px",

packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html

@@ -1,7 +1,7 @@
 <!-- ko component: { name: 'svc-toolbox-item', params: { model: $data.model, item: $data.item, creator: $data.creator, isCompact: $data.isCompact } } -->
 <!-- /ko -->
 <div class="svc-toolbox__item-submenu-button"
-  data-bind="event: { mouseover: onMouseOver }">
+  data-bind="event: { mouseover: onMouseOver, mouseleave: onMouseLeave }">
   <!-- ko component: { name: 'sv-svg-icon', params: { iconName: item.subitemsButtonIcon, size: 16 } } --><!-- /ko -->
-</div>
-<sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
+  <sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
+</div>

packages/survey-creator-knockout/src/toolbox/toolbox-tool.html

@@ -4,7 +4,7 @@
     <div class="svc-toolbox__category-separator"></div>
     <!-- /ko -->
     <div class="svc-toolbox__tool-content sv-action__content"
-        data-bind="event: { pointerdown: (model, event)=>{onPointerDown(event); return true;}, mouseover: function(model, event) { onMouseOverTool(model.item, event); return true; }, mouseleave: function(model, event) { onMouseLeave(model.item, event); return true; } }">
+        data-bind="event: { pointerdown: (model, event)=>{onPointerDown(event); return true;} }">
         <!-- ko component: { name: $data.itemComponent, params: { model: $data, item: $data.item, creator: $data.creator, isCompact: $data.isCompact } } -->
         <!-- /ko -->
     </div>

packages/survey-creator-react/src/toolbox/ToolboxItem.tsx

@@ -85,12 +85,6 @@ export class SurveyCreatorToolboxTool extends CreatorModelElement<
             event.persist();
             this.model.onPointerDown(event);
           }}
-          onMouseOver={(event: any) => {
-            this.model.onMouseOverTool(item, event);
-          }}
-          onMouseLeave={(event: any) => {
-            this.model.onMouseLeave(item, event);
-          }}
         >
           {itemComponent}
         </div>

packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx

@@ -38,8 +38,8 @@ export class SurveyCreatorToolboxItemGroup extends CreatorModelElement<ISurveyCr
         onMouseLeave={(event: any) => this.model.onMouseLeave(this.item, event)}
       >
         <SvgIcon size={24} iconName={this.item.subitemsButtonIcon} ></SvgIcon>
+        <Popup model={this.item.popupModel} getArea={this.item.getArea} />
       </div>
-      <Popup model={this.item.popupModel} getArea={this.item.getArea} />
     </>;
   }
 }

packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue

@@ -6,14 +6,14 @@
     :creator="creator"
     :isCompact="isCompact"
   ></SvComponent>
-  <div class="svc-toolbox__item-submenu-button" @mouseover="hover">
+  <div class="svc-toolbox__item-submenu-button" @mouseover="hover" @mouseleave="leave">
     <SvComponent :is="'sv-svg-icon'" :iconName="item.subitemsButtonIcon" :size="item.iconSize"></SvComponent>
+    <SvComponent
+      :is="'sv-popup'"
+      :model="item.popupModel"
+      :getArea="item.getArea"
+    ></SvComponent>
   </div>
-  <SvComponent
-    :is="'sv-popup'"
-    :model="item.popupModel"
-    :getArea="item.getArea"
-  ></SvComponent>
 </template>
 <script lang="ts" setup>
 import { SvComponent } from "survey-vue3-ui";
@@ -32,4 +32,7 @@ const props = defineProps<{
 const hover = (event: MouseEvent) => {
   props.viewModel.onMouseOver(props.item as QuestionToolboxItem, event);
 };
+const leave = (event: MouseEvent) => {
+  props.viewModel.onMouseLeave(props.item as QuestionToolboxItem, event);
+};
 </script>

packages/survey-creator-vue/src/toolbox/ToolboxTool.vue

@@ -7,16 +7,6 @@
     <div
       class="svc-toolbox__tool-content sv-action__content"
       @pointerdown="model?.onPointerDown"
-      @mousemove="
-        (e) => {
-          model?.onMouseOverTool(item, e);
-        }
-      "
-      @mouseleave="
-        (e) => {
-          model?.onMouseLeave(item, e);
-        }
-      "
     >
       <SvComponent
         :viewModel="model"