Add TreeList common widget

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

@@ -82,7 +82,6 @@
     @include component-footer-button;
 }
 
-
 .palette-category {
     border-bottom: 1px solid #ccc;
 }
@@ -101,6 +100,9 @@
     padding-left: 30px;
     overflow: hidden;
     user-select: none;
+    &:hover {
+        background: $palette-header-background !important;
+    }
 }
 .palette-header > i {
     position: absolute;

packages/node_modules/@node-red/editor-client/src/sass/style.scss

@@ -58,6 +58,7 @@
 @import "ui/common/nodeList";
 @import "ui/common/checkboxSet";
 @import "ui/common/stack";
+@import "ui/common/treeList";
 
 @import "dragdrop";
 

packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss

@@ -0,0 +1,108 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+.red-ui-treeList {
+
+}
+
+.red-ui-treeList-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: #f9f9f9;
+
+    border: 1px solid $form-input-border-color;
+    border-radius: 4px;
+
+    box-sizing: border-box;
+
+    .red-ui-editableList-border {
+        border: none;
+    }
+
+    .red-ui-editableList-container {
+        padding: 0px;
+    }
+
+    .red-ui-editableList-container li {
+        padding: 0;
+        border-bottom: none;
+        .red-ui-editableList-container {
+            // margin-left: 15px;
+        }
+    }
+    .red-ui-editableList-item-content {
+        & > .red-ui-treeList-label .fa-angle-right {
+            transition: transform 0.1s ease-in-out;
+        }
+        .red-ui-editableList {
+            display: none;
+        }
+        &.expanded {
+            & > .red-ui-treeList-label .fa-angle-right {
+                transform: rotate(90deg)
+            }
+            & > .red-ui-editableList {
+                display: block
+            }
+            & > .red-ui-treeList-spinner {
+                display: block;
+            }
+        }
+    }
+}
+label.red-ui-treeList-label {
+    display: block;
+    width: auto;
+}
+.red-ui-treeList-label {
+    @include disable-selection;
+    padding: 6px 0;
+    display: block;
+    color: $form-text-color;
+    text-decoration: none;
+    cursor: pointer;
+    vertical-align: middle;
+    margin: 0;
+
+    &:hover {
+        background: #f9f9f9;
+        color: $form-text-color;
+        text-decoration: none;
+    }
+    &:focus {
+        outline: none;
+        color: $form-text-color;
+        text-decoration: none;
+    }
+    input {
+        margin: 0;
+    }
+}
+.red-ui-treeList-label-text {
+    margin-left: 4px;
+}
+.red-ui-treeList-icon {
+    display: inline-block;
+    width: 20px;
+    text-align: center;
+}
+.red-ui-treeList-spinner {
+    display: none;
+    height: 32px;
+    background: url(images/spin.svg) 50% 50% no-repeat;
+    background-size: auto 20px;
+}