@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/TreeSelect/Select.vue

@@ -4,21 +4,25 @@
   </ib-alert>
 
   <div
+    v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key.startsWith('data-')))"
     class="tree-select"
     :class="{
-      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent
+      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent, 'disabled-parent-autocheck': parentAutoCheck === false
     }"
   >
     <ib-dropdown
-      :disabled="isLoading"
+      :disabled="isLoading || disable"
       :is-resizable="isResizable"
       :vertical="verticalVal"
+      :class="{
+        disable: disable
+      }"
       ref="dropdown"
       @close="onClose"
       @open="onOpen"
     >
       <template v-if="hasTrigger" v-slot:trigger>
-        <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
+        <slot v-bind:selected-count="selectedKeys.length" v-bind:is-open="isOpen" name="trigger"></slot>
       </template>
 
       <template v-else v-slot:trigger="{ isOpened }">
@@ -27,6 +31,7 @@
           tabindex="0"
           class="tree-choice"
           ref="combobox"
+          :aria-expanded="isOpened"
           @click.prevent
           @blur="onBlur"
           @keyup.down="comboboxKeyupDown"
@@ -41,7 +46,7 @@
         >
 
           <template v-if="hasTriggerContent">
-            <slot v-bind:selected-count="selectedKeys.length" name="triggerContent"></slot>
+            <slot v-bind:selected-count="selectedKeys.length" v-bind:is-open="isOpened" name="triggerContent"></slot>
           </template>
 
           <template v-else>
@@ -62,6 +67,7 @@
             v-if="showClearButton"
             kind="ghost"
             class="button-clear"
+            aria-label="Clear selection"
             @click.prevent="clearValue"
             @keypress.enter.stop.prevent
             @keydown.enter.stop.prevent
@@ -76,8 +82,15 @@
             :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
             :classes="'tree-select-caret'"
           />
-      </div>
 
+        <input
+          v-for="id in selectedKeys"
+          type="hidden"
+          :key="'hidden-'+id"
+          :name="actualName"
+          :value="id"
+        />
+      </div>
       </template>
 
       <template v-slot:body>
@@ -85,6 +98,7 @@
           class="tree-drop"
           :class="{ 'not-tree-child': !hasTreeChildren }"
           :style="treeDropPos"
+          role="listbox"
         >
           <div
             v-if="isResizable"
@@ -95,38 +109,22 @@
             v-if="isResizable"
             class="ib-dropdown-resizer ib-dropdown-resizer-right"
             @mousedown="startResizing('right')"
+            v-tooltip.rightCenter="lang('resize_list', 'select')"
           ></div>
-          <list
-            :class="{ 'has-hierarchy': hasHierarchy }"
-            v-if="Object.keys(actualBookmarkedOptions).length > 0"
-          >
-            <select-option
-              :key="'bookmark' + option.id"
-              v-for="option in actualBookmarkedOptions"
-              :option="option"
-              :parent-auto-check="false"
-              :is-multiple="isMultiple"
-              :is-bookmarkable="true"
-              :is-bookmarked="true"
-              @check="registerCheck"
-              @toggle-bookmark="toggleBookmark"
-              :uid="uid"
-              :only-end-nodes="onlyEndNodes"
-              :html-title="htmlOptionTitle"
-              :show-input="showInputs"
-            ></select-option>
-          </list>
 
           <ib-input
             class="tree-search"
             v-if="showSearch"
             ref="search"
+            autocomplete="new-password"
             :show-icon="true"
             :value="filterString"
+            :debounce="searchDebounce"
             :aria-label="
               searchPlaceholderText
                 ? searchPlaceholderText
-                : actualStrings.searchPlaceholder"
+                : actualStrings.searchPlaceholder
+            "
             :placeholder="
               searchPlaceholderText
                 ? searchPlaceholderText
@@ -139,7 +137,11 @@
           <list
             ref="list"
             role="listbox"
-            :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
+            :class="{
+              'tree-select-list': true,
+              'has-hierarchy': hasHierarchy,
+              'alphabetic-list': alphabeticStyle,
+            }"
           >
             <div
               v-if="
@@ -151,6 +153,7 @@
             >
               <slot name="emptyMessage"></slot>
             </div>
+
             <div
               v-else-if="!requiredDependencyNotFilled && !visibleOptionsCount"
               class="tree-select-default-empty tree-select-empty"
@@ -171,20 +174,43 @@
                   checked: isEmpty,
                 }"
                 :name="actualName"
-                :parent-auto-check="parentAutoCheck"
+                :parent-auto-check="parentAutoCheckVal"
+                :is-multiple="isMultiple"
+                role="option"
+                @check="registerCheck"
+                @toggle-bookmark="toggleBookmark"
+                :uid="uid"
+                :only-end-nodes="onlyEndNodes"
+                :show-input="showInputs"
+              ></select-option>
+            </template>
+
+            <template v-if="Object.keys(actualBookmarkedOptions).length > 0">
+              <select-option
+                :key="'bookmark' + option.id"
+                v-for="option in actualBookmarkedOptions"
+                class="bookmarked-option"
+                :option="option"
+                :parent-auto-check="false"
                 :is-multiple="isMultiple"
+                :is-bookmarkable="true"
+                :is-bookmarked="true"
+                role="option"
                 @check="registerCheck"
                 @toggle-bookmark="toggleBookmark"
                 :uid="uid"
                 :only-end-nodes="onlyEndNodes"
+                :html-title="htmlOptionTitle"
                 :show-input="showInputs"
               ></select-option>
             </template>
 
             <template v-if="!requiredDependencyNotFilled">
+            <div class="scrollable-container">
               <template
                 v-if="
                   allOptions &&
+                  !alphabeticStyle &&
                   isMultiple &&
                   visibleOptionsCount &&
                   !requiredDependencyNotFilled
@@ -193,7 +219,6 @@
                 <select-option
                   :option="{
                     title: actualStrings.selectAllOptions,
-                    id: '!all!',
                     initiallyVisible: true,
                     visible: true,
                     isDisabled: visibleOptionsCount < optionsCount,
@@ -203,51 +228,66 @@
                       : false,
                   }"
                   :is-toggle="isToggle"
-                  :name="actualName"
                   :parent-auto-check="false"
                   :is-multiple="isMultiple"
                   :is-bookmarkable="false"
                   :uid="uid"
                   :only-end-nodes="onlyEndNodes"
                   :show-input="showInputs"
+                  :alphabetic-style="alphabeticStyle"
+                  role="option"
                   @check="manageAll"
-                  @on-focus="(id) => focusedOptionId = id"
+                  @on-focus="(id) => (focusedOptionId = id)"
                 ></select-option>
               </template>
 
-              <template
-                v-for="option in actualOptions"
-                :key="name + option.value"
-              >
-                <slot
-                  :option="option"
-                  :name="actualName"
-                  :parent-auto-check="parentAutoCheck"
-                  :is-multiple="isMultiple"
-                  :uid="uid"
-                  :only-end-nodes="onlyEndNodes"
-                  :html-title="htmlOptionTitle"
-                  :show-input="showInputs"
+              <div ref="parentRef">
+                <div
+                  :style="{
+                    height: virtualizer?.getTotalSize() + 'px',
+                    position: 'relative',
+                  }"
                 >
-                <select-option
-                    v-show="option.visible"
-                    :option="option"
-                    :is-toggle="isToggle"
-                    :name="actualName"
-                    :parent-auto-check="parentAutoCheck"
-                    :is-multiple="isMultiple"
-                    :is-bookmarkable="isBookmarkable"
-                    :uid="uid"
-                    :only-end-nodes="onlyEndNodes"
-                    :html-title="htmlOptionTitle"
-                    :show-input="showInputs"
-                    @check="registerCheck"
-                    @toggle-bookmark="toggleBookmark"
-                    @on-focus="(id) => focusedOptionId = id"
-                  ></select-option>
-                </slot>
-              </template>
+                  <div
+                    v-for="virtualRow in virtualizer?.getVirtualItems()"
+                    :key="virtualRow.index"
+                    :data-index="virtualRow.index"
+                    :ref="virtualizer.measureElement"
+                    :style="{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }"
+                  >
+                    <select-option
+                        v-if="actualOptions[virtualRow.index]"
+                        v-show="actualOptions[virtualRow.index].visible && !actualOptions[virtualRow.index].hidden"
+                        :option="actualOptions[virtualRow.index]"
+                        :is-toggle="isToggle"
+                        :name="actualName"
+                        role="option"
+                        :parent-auto-check="parentAutoCheckVal"
+                        :is-multiple="isMultiple"
+                        :is-bookmarkable="isBookmarkable"
+                        :uid="uid"
+                        :only-end-nodes="onlyEndNodes"
+                        :html-title="htmlOptionTitle"
+                        :show-input="showInputs"
+                        :alphabetic-style="alphabeticStyle"
+                        @check="registerCheck"
+                        @toggle-bookmark="toggleBookmark"
+                        @on-focus="(id) => focusedOptionId = id"
+                    ></select-option>
+                  </div>
+                </div>
+              </div>
+              </div>
+
             </template>
+
+            <div v-if="infiniteLoader" ref="infinityLoader"></div>
           </list>
         </div>
       </template>
@@ -256,7 +296,7 @@
 </template>
 
 <script>
-// <!-- TODO: use constants for vertical position -->
+import { useVirtualizer } from "@tanstack/vue-virtual";
 import IbInput from "../Form/Input/Input.vue";
 import Option from "./Option.vue";
 import Mark from "mark.js/dist/mark.es6.min";
@@ -266,6 +306,9 @@ import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
 import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
+import InfinityLoaderMixin from "./mixins/InfinityLoaderMixin";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
+import debounce from "../../helpers/debounce";
 
 function copy(data) {
     return JSON.parse(JSON.stringify(data));
@@ -274,8 +317,13 @@ function copy(data) {
 export default {
   name: "IbTreeSelect",
   inject: ["LANG_COMPONENTS"],
+  mixins: [InfinityLoaderMixin],
   props: {
     classList: [String, Array],
+    keywordHighlighter: {
+      type: Boolean,
+      default: true,
+    },
     placeholder: {
       type: String,
       default: "",
@@ -315,6 +363,7 @@ export default {
       },
     },
     options: {
+      type: [Array, Function],
       default() {
         return [];
       },
@@ -338,7 +387,7 @@ export default {
     },
     parentAutoCheck: {
       type: Boolean,
-      default: true,
+      default: null,
     },
     strings: {
       type: Object,
@@ -420,6 +469,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    searchDebounce: {
+      type: Number,
+      default: 500,
+    },
+    alphabeticStyle: {
+      type: Boolean,
+      default: false
+    },
   },
   emits: [
     "close",
@@ -429,6 +490,7 @@ export default {
     "resize",
     "submit",
     "clearValue",
+    "toggle-bookmarked-option",
     "update:modelValue",
   ],
   watch: {
@@ -440,9 +502,15 @@ export default {
     },
     modelValue: {
       handler(value) {
-        this.val = value;
-        this.actualOptions = [];
-        this.setPreparedValues();
+          if (this.isInternalChange) return;
+
+          this.val = value;
+          this.val = value;
+          if (!Array.isArray(value) || value.join(',') !== Object.keys(this.selected).join(',')) {
+            this.setPreparedValues(this.actualOptions, false);
+          }
+          const selectedSet = new Set(Array.isArray(value) ? value : [value].filter(Boolean));
+          this.syncCheckedBySet(selectedSet);
       },
       deep: true,
     },
@@ -462,7 +530,7 @@ export default {
     },
     options: {
       handler(newOptions) {
-        this.initialOptions = copy(newOptions);
+        this.initialOptions  = typeof newOptions === "function" ? newOptions : copy(newOptions);
       },
       deep: true,
     },
@@ -517,18 +585,21 @@ export default {
     document.addEventListener("mouseup", this.endResizing);
   },
   data() {
-    this.defaultFilter = (options) => {
+    this.defaultFilter = debounce((options) => {
       this.marker.unmark();
       const filterString = this.filterString.toLowerCase().trim();
-      this.filterFunc.call(this, options, filterString);
+      this.countVisibleChildren = this.filterFunc.call(this, options, filterString);
 
-      if (filterString) {
+      if (filterString && this.keywordHighlighter) {
         this.marker.mark(filterString);
       }
-    };
+
+      this.virtualizer?.measure();
+    }, 1000);
 
     return {
-      initialOptions: copy(this.options),
+      virtualizer: null,
+      initialOptions: typeof this.options === "function" ? this.options : copy(this.options),
       val: this.modelValue ? this.modelValue : this.value,
       size: {
         left: (this.initialSize && this.initialSize.left) || 0,
@@ -536,14 +607,15 @@ export default {
       },
       resizingProp: null,
       isInitialized: false,
-      optionsIdsWatch: [],
       isLoading: false,
+      isOpen: false,
+      optionsIdsWatch: [],
       actualName: this.isMultiple ? this.name + "[]" : this.name,
+      parentAutoCheckVal: this.parentAutoCheck !== null ? this.parentAutoCheck : this.isMultiple,
       filterString: "",
       actualOptions: [],
       actualBookmarkedOptions: {},
       selected: [],
-      isOpen: false,
       verticalVal: this.vertical ?? "bottom",
       allOptionsIsChecked: true,
       hasTreeChildren: false,
@@ -589,9 +661,38 @@ export default {
         ...this.strings,
       },
       dependencyValue: null,
+      isInternalChange: false,
+      nodeIndex: new Map()
     };
   },
   methods: {
+    toggleDuplicateOptionsFast(optionId, checked) {
+        const arr = this.nodeIndex.get(optionId);
+        if (!arr) return;
+        for (const node of arr) node.checked = checked;
+    },
+    buildNodeIndex() {
+        this.nodeIndex.clear();
+        this.traverseTree(this.actualOptions, (node) => {
+          if (!this.nodeIndex.has(node.id)) this.nodeIndex.set(node.id, []);
+          this.nodeIndex.get(node.id).push(node);
+        });
+    },
+    syncCheckedBySet(selectedSet) {
+        this.traverseTree(this.actualOptions, (opt) => {
+          const shouldBeChecked = selectedSet.has(opt.id);
+          if (opt.checked !== shouldBeChecked) opt.checked = shouldBeChecked;
+        });
+
+        this.selected = {};
+        this.traverseTree(this.actualOptions, (opt) => {
+          if (opt.checked && (!this.onlyEndNodes || !opt.children)) {
+            this.selected[opt.id] = opt;
+          }
+        });
+
+        this.allOptionsIsChecked = this.checkIfOptionsChecked(this.actualOptions);
+    },
     onBlur() {
       setTimeout(() => {
         if (!this.isOpen) {
@@ -614,7 +715,7 @@ export default {
       this.$refs.combobox.focus();
     },
     focusOnFirstOptions() {
-      this.$refs.list.$el.querySelector('[tabindex]:not(hidden)').focus();
+      this.$refs.list.$el.querySelector("[tabindex]:not(hidden)").focus();
     },
     startResizing(prop) {
       this.resizingProp = prop;
@@ -667,7 +768,7 @@ export default {
     },
     filter(filterString, options) {
       this.filterString = filterString;
-      this.$emit("search", { search: this.filterString });
+      this.$emit("search", this.filterString);
       this.defaultFilter(options);
     },
     setPreparedValues(opt) {
@@ -678,37 +779,32 @@ export default {
         );
       }
 
-      return this.prepare(options).then(([options, selected]) => {
-        this.actualOptions = options;
-        this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
-        this.isInitialized = true;
-        this.selected = selected;
-        this.setBookmarkedOptions(options);
-      });
+       return this.prepare(options).then(([options, selected]) => {
+         this.actualOptions = options;
+         this.buildNodeIndex();
+         this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
+         this.isInitialized = true;
+         this.selected = selected;
+         this.setBookmarkedOptions(options);
+       });
     },
     clear() {
-      this.setPreparedValues();
-      this.allOptionsIsChecked = false;
-      this.selected = [];
-
-      if (this.isMultiple) {
-        this.$emit("update:modelValue", null);
-        this.$emit("input", null);
-        this.$emit("clear-value", null);
-
-      } else {
-        this.$emit("update:modelValue", []);
-        this.$emit("input", []);
-        this.$emit("clear-value", []);
-      }
+         this.traverseTree(this.actualOptions, (opt) => (opt.checked = false));
+         this.selected = [];
+         this.allOptionsIsChecked = false;
 
-      this.setPreparedValues();
+         this.isInternalChange = true;
+         const empty = this.isMultiple ? [] : null;
+         this.$emit("update:modelValue", empty);
+         this.$emit("input", empty);
+         this.$emit("clear-value", empty);
+         this.$nextTick(() => (this.isInternalChange = false));
     },
     clearValue() {
       this.clear();
       this.setPreparedValues();
     },
-    prepare(options) {
+    prepare(options, checkInitialVisibility = true) {
       return new Promise((res) => {
         const selected = {},
           promises = [];
@@ -736,7 +832,6 @@ export default {
                 typeof option.visible === "undefined" ? true : option.visible;
               option.visible = option.initiallyVisible;
               option.readonly = option.readonly ? true : false;
-              option.isDisabled = false;
 
               option.checked = this.isMultiple
                 ? this.val !== null &&
@@ -760,6 +855,13 @@ export default {
                     this.prepare(option.children).then(
                       ([preparedChildren, selectedChildren]) => {
                         option.children = preparedChildren;
+
+                        if (this.parentAutoCheckVal) {
+                          option.checked = this.checkIfOptionsChecked(
+                            option.children
+                          );
+                        }
+
                         Object.assign(selected, selectedChildren);
                         res(option);
                       }
@@ -789,11 +891,16 @@ export default {
 
         if (option.children && option.children.length) {
           let visibleChildrenCount = this.filterFunc(option.children, filterString);
+
           visibleOptionsCount += visibleChildrenCount;
 
           if (visibleChildrenCount) {
-              option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
-              option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
+            option.isChildrenVisible =
+              filterString.length > 0 ||
+              Boolean(Object.keys(this.actualBookmarkedOptions).length);
+            option.isDisabled =
+              visibleChildrenCount < option.children.length &&
+              !this.isBookmarkable;
           }
 
           if (!isVisible) {
@@ -821,57 +928,52 @@ export default {
       this.$emit("submit");
     },
     change() {
-      const values = Object.keys(this.selected);
-      if (this.isMultiple) {
-        this.$emit("update:modelValue", values);
-        this.$emit("input", values);
-      } else {
-        this.$emit("update:modelValue", values[0]);
-        this.$emit("input", values[0]);
-      }
-      this.$globalEvents.$emit("select-" + this.filterId + ":update", {
-        values,
-        filter: this.filterId,
-      });
-      this.$refs.dropdown.close();
+       const values = Object.keys(this.selected);
+       this.isInternalChange = true;
+       if (this.isMultiple) {
+         this.$emit("update:modelValue", values);
+         this.$emit("input", values);
+       } else {
+         this.$emit("update:modelValue", values[0]);
+         this.$emit("input", values[0]);
+       }
+       this.$nextTick(() => (this.isInternalChange = false));
+       this.$globalEvents.$emit("select-" + this.filterId + ":update", { values, filter: this.filterId });
+       if (!this.isMultiple) this.$refs.dropdown.close();
     },
     checkIfOptionsChecked(options) {
       return options.every((option) => option.checked || option.readonly);
     },
     registerCheck(option, isChecked, isDirectChild) {
-      if (isChecked) {
-        option.checked = true;
-        if (this.isMultiple) {
-          if (
-            !(this.onlyEndNodes && option.children && option.children.length)
-          ) {
+        if (isChecked) {
+          option.checked = true;
+          if (this.isMultiple && !(this.onlyEndNodes && option.children?.length)) {
             this.selected[option.id] = option;
-            this.$emit("update:modelValue", Object.keys(this.selected));
-            this.$emit("input", Object.keys(this.selected));
+          } else if (!this.isMultiple) {
+            const prev = Object.keys(this.selected)[0];
+            if (prev) this.selected[prev].checked = false;
+            this.selected = { [option.id]: option };
+            this.change();
+            return;
           }
         } else {
-          const selectedOptionKey = Object.keys(this.selected)[0];
+          delete this.selected[option.id];
+          option.checked = false;
+        }
 
-          if (selectedOptionKey) {
-            this.selected[selectedOptionKey].checked = false;
-          }
+        this.toggleDuplicateOptionsFast(option.id, isChecked);
 
-          this.selected = { [option.id]: option };
-          this.change();
+        if (isDirectChild) {
+          this.allOptionsIsChecked = this.checkIfOptionsChecked(this.actualOptions);
         }
-      } else {
-        delete this.selected[option.id];
-        option.checked = false;
-        this.$emit("update:modelValue", Object.keys(this.selected));
-        this.$emit("input", Object.keys(this.selected));
-      }
 
-      this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);
-      if (isDirectChild) {
-        this.allOptionsIsChecked = this.checkIfOptionsChecked(
-          this.actualOptions
-        );
-      }
+        if (this.isMultiple) {
+          this.isInternalChange = true;
+          const values = Object.keys(this.selected);
+          this.$emit("update:modelValue", values);
+          this.$emit("input", values);
+          this.$nextTick(() => (this.isInternalChange = false));
+        }
     },
     toggleDuplicateOptions(options, optionId, checked) {
       for (let opt of options) {
@@ -933,13 +1035,15 @@ export default {
     },
     onClose() {
       this.isOpen = false;
-      this.filter("", this.actualOptions);
+      this.filterString = "";
+      this.filterFunc(this.actualOptions, this.filterString);
 
       if (this.isMultiple) {
         this.$emit("close", Object.keys(this.selected));
       } else {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
+      this.virtualizer = null;
       this.$emit("blur");
       this.verticalVal = this.vertical ?? "bottom";
     },
@@ -947,6 +1051,17 @@ export default {
       const screenHeight = document.documentElement.scrollHeight;
       this.isOpen = true;
 
+
+      if (!this.virtualizer) {
+        this.virtualizer = useVirtualizer({
+          count: this.actualOptions.length,
+          getScrollElement: () => this.$refs.parentRef,
+          estimateSize: () => 40,
+          overscan: 8,
+        });
+      }
+      this.virtualizer?.measure();
+
       if (this.vertical === "bottom") return;
 
       this.$nextTick(() => {
@@ -955,7 +1070,7 @@ export default {
           this.verticalVal = "top";
         }
       })
-    }
+    },
   },
   computed: {
     hasTrigger() {
@@ -995,7 +1110,7 @@ export default {
         }
       });
     },
-    selectStatus() {
+      selectStatus() {
       if (this.staticPlaceholder) {
         return this.placeholder;
       } else if (this.isLoading) {
@@ -1006,7 +1121,7 @@ export default {
         return this.selectedKeys
           .map((key) => this.selected[key].title)
           .join(",");
-      } else if (this.selectedKeys.length < this.optionsCount) {
+      } else if (!this.allOptionsIsChecked) {
         return this.actualStrings.selectedCount
           .replace("{selected}", this.selectedKeys.length)
           .replace("{all}", this.optionsCount);
@@ -1026,7 +1141,7 @@ export default {
       );
     },
     showSearch() {
-      return this.useSearch || this.optionsCount > 10;
+      return (this.useSearch || (this.optionsCount > 10 && !this.alphabeticStyle));
     },
     arrayOfOptions() {
       return this.getArrayOptions(this.actualOptions);
@@ -1073,12 +1188,32 @@ export default {
     List,
     "select-option": Option,
   },
+  directives: {
+    Tooltip,
+  },
   beforeUnmount() {
     document.removeEventListener("mousemove", this.onResize);
     document.removeEventListener("mouseup", this.endResizing);
   },
+  inheritAttrs: false,
 };
 </script>
 <style lang="scss">
-@import "./scss/select.scss";
+@use "./scss/select.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+
+.scrollable-container {
+    overflow: auto;
+    max-height: 300px;
+}
+
+.bookmarked-option {
+  .tree-select-option-label {
+    padding-left: 15px;
+
+    ion-icon {
+      color: $blue-900;
+    }
+  }
+}
 </style>