@vitrosoftware/common-ui-ts 1.1.164 → 1.1.166

package/css/std/controls/editable-list/editable-list.css

@@ -1,11 +1,22 @@
 .vitro-editable-list {
     flex-direction: column;
+    max-height: 100%;
+    padding: 19px 0 19px 24px;
+}
+
+.vitro-editable-list > :global(.ps) {
+    padding-right: 24px;
+}
+
+.vitro-editable-list > :global(.ps):global(.ps__rail-x),
+.vitro-editable-list > :global(.ps) :global(.ps__rail-y) {
+    background-color: transparent !important;
 }
 
 .vitro-header {
     width: 100%;
     min-height: 32px;
-    padding: 0px 4px;
+    padding: 0px 28px 0 4px;
 }
 
 .vitro-create-button {
@@ -38,7 +49,13 @@
 }
 
 .vitro-dropdown-button :global(.dropdown-menu) {
-    transform: translate3d(calc(100% - 50px), 26px, 0) !important;
+    position: fixed !important;
+    inset: auto 0 auto 0 !important;
+}
+
+.vitro-dropdown-button .vitro-dropdown-menu-top::before {
+    top: calc(100% - 1px);
+    transform: rotate(180deg);
 }
 
 .vitro-dropdown-button :global(.dropdown-menu::before) {

package/css/std/controls/search/search.css

@@ -6,7 +6,7 @@
 }
 
 .vitro-search.vitro-active {
-    width: 376px;
+    width: 100%;
 }
 
 .vitro-settings-dialog {

package/css/std/controls/sidebar/sidebar-item.css

@@ -284,9 +284,9 @@
 }
 
 .vitro-sidebar-group-slideup-panel .vitro-scrollbar > div:first-child {
-    padding: 0 12px 12px 12px !important;
+    padding: 0 16px 12px 16px !important;
     max-height: none !important;
-    height: 100% !important;
+    height: calc(100% - 32px);
 }
 
 .vitro-sidebar-group-slideup-panel .vitro-scrollbar > div:first-child > ul {

package/css/std/controls/tree-view/tree-view.css

@@ -129,10 +129,25 @@
     float: right;
 }
 
+.vitro-tree-view.vitro-arrow-right :global(.vitro-root-node.jstree-closed) > :global(.jstree-ocl),
+.vitro-tree-view.vitro-arrow-right :global(.vitro-root-node.jstree-open) > :global(.jstree-ocl) {
+    display: inline-block;
+}
+
+.vitro-tree-view.vitro-arrow-right :global(.jstree-open) > :global(.jstree-ocl) {
+    transform: rotate(180deg);
+}
+
+.vitro-tree-view.vitro-arrow-right :global(.jstree-closed) > :global(.jstree-ocl) {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/tree-view/img/collapse-bottom-grey.svg');
+}
+
 .vitro-tree-view.vitro-arrow-right :global(.jstree-container-ul) {
     max-width: 100%;
 }
 
 .vitro-tree-view.vitro-arrow-right :global(.jstree-anchor) {
     width: calc(100% - 24px);
-}
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/dist/index.css

@@ -547,13 +547,29 @@ html, body {
     float: right;
 }
 
+._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .vitro-root-node.jstree-closed > .jstree-ocl,
+._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .vitro-root-node.jstree-open > .jstree-ocl {
+    display: inline-block;
+}
+
+._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .jstree-open > .jstree-ocl {
+    transform: rotate(180deg);
+}
+
+._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .jstree-closed > .jstree-ocl {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/tree-view/img/collapse-bottom-grey.svg');
+}
+
 ._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .jstree-container-ul {
     max-width: 100%;
 }
 
 ._tree-view_vitro-tree-view_3oii-CW._tree-view_vitro-arrow-right_dVxSsID .jstree-anchor {
     width: calc(100% - 24px);
-}
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 ._progress_vitro-progress-container_3Dbhbpo {
     width: 100%;
     height: 100%;
@@ -5133,9 +5149,9 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 }
 
 ._sidebar-item_vitro-sidebar-group-slideup-panel_15tkxuO ._sidebar-item_vitro-scrollbar___xylIx > div:first-child {
-    padding: 0 12px 12px 12px !important;
+    padding: 0 16px 12px 16px !important;
     max-height: none !important;
-    height: 100% !important;
+    height: calc(100% - 32px);
 }
 
 ._sidebar-item_vitro-sidebar-group-slideup-panel_15tkxuO ._sidebar-item_vitro-scrollbar___xylIx > div:first-child > ul {
@@ -6960,7 +6976,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 }
 
 ._search_vitro-search_QkJksC_._search_vitro-active_1HhQOCR {
-    width: 376px;
+    width: 100%;
 }
 
 ._search_vitro-settings-dialog_1_c5bIg {
@@ -8230,12 +8246,23 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 }
 ._editable-list_vitro-editable-list_2y8aXbO {
     flex-direction: column;
+    max-height: 100%;
+    padding: 19px 0 19px 24px;
+}
+
+._editable-list_vitro-editable-list_2y8aXbO > .ps {
+    padding-right: 24px;
+}
+
+._editable-list_vitro-editable-list_2y8aXbO > .ps.ps__rail-x,
+._editable-list_vitro-editable-list_2y8aXbO > .ps .ps__rail-y {
+    background-color: transparent !important;
 }
 
 ._editable-list_vitro-header_3ilVZhe {
     width: 100%;
     min-height: 32px;
-    padding: 0px 4px;
+    padding: 0px 28px 0 4px;
 }
 
 ._editable-list_vitro-create-button_3E1aQDB {
@@ -8268,7 +8295,13 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 }
 
 ._editable-list_vitro-dropdown-button_vPtNQxA .dropdown-menu {
-    transform: translate3d(calc(100% - 50px), 26px, 0) !important;
+    position: fixed !important;
+    inset: auto 0 auto 0 !important;
+}
+
+._editable-list_vitro-dropdown-button_vPtNQxA ._editable-list_vitro-dropdown-menu-top_1miFWtX::before {
+    top: calc(100% - 1px);
+    transform: rotate(180deg);
 }
 
 ._editable-list_vitro-dropdown-button_vPtNQxA .dropdown-menu::before {

package/dist/index.js

@@ -480,12 +480,16 @@ var ScrollBar = function ScrollBar(props) {
   });
   React.useEffect(function () {
     if (ref.current) {
+      ref.current.addEventListener('ps-scroll-y', onScrollY);
       init();
     }
     return function () {
       if (element) {
         element.destroy();
       }
+      if (ref.current) {
+        ref.current.removeEventListener('ps-scroll-y', onScrollY);
+      }
     };
   }, []);
   React.useEffect(function () {
@@ -521,6 +525,11 @@ var ScrollBar = function ScrollBar(props) {
   var onWheel = function onWheel(e) {
     e.stopPropagation();
   };
+  var onScrollY = function onScrollY(e) {
+    if (ref.current && props.onScrollY) {
+      props.onScrollY(e, ref.current);
+    }
+  };
   return React__default.createElement("div", {
     ref: ref,
     className: props.className || CTRL.EMPTY
@@ -20516,6 +20525,8 @@ var METHOD;
   METHOD["GET_BOTTOM_CHECKED"] = "get_bottom_checked";
   METHOD["IS_CHECKED"] = "is_checked";
   METHOD["IS_UNDETERMINED"] = "is_undetermined";
+  METHOD["CLEAR_STATE"] = "clear_state";
+  METHOD["SET_ICON"] = "set_icon";
 })(METHOD || (METHOD = {}));
 var EVENT;
 (function (EVENT) {
@@ -20525,6 +20536,8 @@ var EVENT;
   EVENT["MODEL"] = "model.jstree";
   EVENT["DBLCLICK"] = "dblclick.jstree";
   EVENT["DROP"] = "drop.vakata.jstree";
+  EVENT["HOVER_NODE"] = "hover_node.jstree";
+  EVENT["DEHOVER_NODE"] = "dehover_node.jstree";
 })(EVENT || (EVENT = {}));
 var NODE_TYPE;
 (function (NODE_TYPE) {
@@ -20734,7 +20747,10 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
     return this.jsTree.jstree(METHOD.IS_UNDETERMINED, node);
   };
   _proto.clearState = function clearState() {
-    return this.jsTree.jstree('clear_state');
+    return this.jsTree.jstree(METHOD.CLEAR_STATE);
+  };
+  _proto.setIcon = function setIcon(obj, icon) {
+    this.jsTree.jstree(METHOD.SET_ICON, obj, icon);
   };
   return JsTreeViewContextImpl;
 }();
@@ -20789,7 +20805,29 @@ var TreeView = function TreeView(props) {
         onDrop(e);
       });
     }
+    if (jsTreeTreeView) {
+      jsTreeTreeView.setEventHandler({
+        id: EVENT.HOVER_NODE,
+        process: onHoverNode
+      });
+      jsTreeTreeView.setEventHandler({
+        id: EVENT.DEHOVER_NODE,
+        process: onDehoverNode
+      });
+    }
   }, [jsTreeTreeView]);
+  var onHoverNode = function onHoverNode(treeView, e, obj) {
+    var _obj$node$original;
+    if ((_obj$node$original = obj.node.original) !== null && _obj$node$original !== void 0 && _obj$node$original.imageHoverUrl) {
+      treeView.setIcon(obj.node, obj.node.original.imageHoverUrl);
+    }
+  };
+  var onDehoverNode = function onDehoverNode(treeView, e, obj) {
+    var _obj$node$original2, _obj$node$original3;
+    if (obj.node.icon && (_obj$node$original2 = obj.node.original) !== null && _obj$node$original2 !== void 0 && _obj$node$original2.imageHoverUrl && (_obj$node$original3 = obj.node.original) !== null && _obj$node$original3 !== void 0 && _obj$node$original3.imageUrl) {
+      treeView.setIcon(obj.node, obj.node.original.imageUrl);
+    }
+  };
   var init = function init() {
     config.core.data = getData;
     jquery(jsTreeRef.current).jstree(config);
@@ -22212,8 +22250,8 @@ var renderMicrofrontend = function renderMicrofrontend(rendererName, microFronte
   }
 };
 
-var MicroFrontend = function MicroFrontend(props) {
-  var rootRef = React.useRef(null);
+var MicroFrontend = React.forwardRef(function (props, ref) {
+  var rootRef = ref || React.useRef(null);
   var containerId = props.data && props.data.containerId ? props.data.containerId : props.name;
   var microFrontendState = React.useMemo(function () {
     return new MicroFrontendState();
@@ -22276,7 +22314,7 @@ var MicroFrontend = function MicroFrontend(props) {
     id: containerId,
     ref: rootRef
   });
-};
+});
 
 var EVENT$2;
 (function (EVENT) {
@@ -60876,23 +60914,26 @@ var Button$2 = React.forwardRef(function (props, ref) {
     }
   };
   var onClick = function onClick(e) {
-    if (props.onClick) {
-      setPending(true);
-      var promise = props.onClick(e);
-      if (promise && promise["finally"]) {
-        promise["finally"](function () {
+    var _ref$current;
+    if (!props.isDisabled && !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.disabled)) {
+      if (props.onClick) {
+        setPending(true);
+        var promise = props.onClick(e);
+        if (promise && promise["finally"]) {
+          promise["finally"](function () {
+            setPending(false);
+          });
+        } else {
           setPending(false);
+        }
+      } else if (props.to) {
+        var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
+          detail: {
+            pathname: props.to
+          }
         });
-      } else {
-        setPending(false);
+        window.dispatchEvent(event);
       }
-    } else if (props.to) {
-      var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
-        detail: {
-          pathname: props.to
-        }
-      });
-      window.dispatchEvent(event);
     }
   };
   return React__default.createElement("button", {
@@ -61774,10 +61815,11 @@ var DropdownButton = function DropdownButton(props) {
   }) : React__default.createElement("span", {
     className: styles$p['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
-    renderOnMount: false,
+    renderOnMount: props.isRenderOnMount,
     flip: props.isFlip !== false,
     style: props.menuStyle || {},
-    popperConfig: props.popperConfig || {}
+    popperConfig: props.popperConfig || {},
+    ref: props.onGetMenuRef
   }, React__default.createElement(ScrollBar, null, itemList.map(function (x) {
     return React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
@@ -61907,12 +61949,6 @@ var TabGroupComponent = function TabGroupComponent(props) {
   var _useState2 = React.useState(0),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  var _useState3 = React.useState(null),
-    component = _useState3[0],
-    setComponent = _useState3[1];
-  var _useState4 = React.useState([]),
-    tabList = _useState4[0],
-    setTabList = _useState4[1];
   var ref = React.useRef(null);
   var resizeObserver = new window.ResizeObserver(function (entries) {
     for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
@@ -61940,33 +61976,25 @@ var TabGroupComponent = function TabGroupComponent(props) {
       resizeObserver.disconnect();
     };
   }, []);
-  React.useEffect(function () {
+  var getContent = function getContent() {
     if (props.itemList) {
       if (props.itemList[currentTab] && props.itemList[currentTab].content) {
-        var c = React__default.createElement(props.itemList[currentTab].content.component, props.itemList[currentTab].content.props);
-        setComponent(c);
+        return React__default.createElement(props.itemList[currentTab].content.component, props.itemList[currentTab].content.props);
       } else if (props.itemList[0]) {
         setCurrentTab(0);
       }
-    } else {
-      setComponent(null);
-    }
-  }, [currentTab, props.itemList]);
-  React.useEffect(function () {
-    if (props.itemList) {
-      var list = props.itemList.map(function (item, index) {
-        return _extends({}, item, {
-          index: index
-        });
-      });
-      setTabList(list);
     }
-  }, [props.itemList]);
+    return null;
+  };
   return React__default.createElement("div", {
     className: styles$q['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
-    itemList: tabList,
+    itemList: props.itemList.map(function (item, index) {
+      return _extends({}, item, {
+        index: index
+      });
+    }),
     width: width,
     currentTab: currentTab,
     changeTab: changeTab,
@@ -61974,7 +62002,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     isDisabled: props.isDisabled
   }), React__default.createElement("div", {
     className: 'vitro-content'
-  }, component));
+  }, getContent()));
 };
 
 var tabScriptList = [{
@@ -62984,10 +63012,11 @@ var Input = React.forwardRef(function (props, ref) {
     return MAX_LENGTH.SINGLELINE;
   };
   var getValue = function getValue(value) {
+    var stringValue = value.toString();
     if (!props.isMultiline) {
-      return value.substring(0, getMaxLength());
+      return stringValue.substring(0, getMaxLength());
     }
-    return value;
+    return stringValue;
   };
   if (props.isMultiline) {
     control = React__default.createElement(Textarea, {
@@ -63488,7 +63517,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.164";
+var version$1 = "1.1.166";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -65461,6 +65490,12 @@ var SlideUpPanel = function SlideUpPanel(props) {
     setSwipePosition = _useState3[1];
   var contentRef = React.useRef(null);
   var buttonRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.CLICK, onClickOutsideSlideUp);
+    return function () {
+      window.removeEventListener(exports.EVENT.CLICK, onClickOutsideSlideUp);
+    };
+  }, []);
   React.useEffect(function () {
     setIsShow(props.isShow);
     if (props.isShow) {
@@ -65476,6 +65511,12 @@ var SlideUpPanel = function SlideUpPanel(props) {
       contentRef.current.style.height = contentRef.current.offsetHeight + UNIT.PX;
     }
   }, [isExpanded]);
+  var onClickOutsideSlideUp = function onClickOutsideSlideUp(e) {
+    var slideUpContent = contentRef.current;
+    if (slideUpContent && slideUpContent.parentNode && e.target === slideUpContent.parentNode) {
+      close();
+    }
+  };
   var onTouchStart = function onTouchStart(e) {
     setSwipePosition(_extends({}, swipePosition, {
       start: e.changedTouches[0].clientY
@@ -67520,6 +67561,7 @@ var SearchInput = function SearchInput(props) {
   };
   var onCancel = function onCancel() {
     resetValue();
+    onBlur();
     props.onCancel();
   };
   var onChange = function onChange(e) {
@@ -83720,9 +83762,11 @@ var Switch = function Switch(props) {
   }));
 };
 
-var styles$1L = {"vitro-editable-list":"_editable-list_vitro-editable-list_2y8aXbO","vitro-header":"_editable-list_vitro-header_3ilVZhe","vitro-create-button":"_editable-list_vitro-create-button_3E1aQDB","vitro-editable-item":"_editable-list_vitro-editable-item_cWSWi1n","vitro-active":"_editable-list_vitro-active_39PUrSM","vitro-button-container":"_editable-list_vitro-button-container_1okfn08","vitro-dropdown-button":"_editable-list_vitro-dropdown-button_vPtNQxA","vitro-display-none":"_editable-list_vitro-display-none_1nqU_hD","vitro-mobile":"_editable-list_vitro-mobile_2IDiwft","vitro-editable-item-icon":"_editable-list_vitro-editable-item-icon_29jFw_f","vitro-editable-item-label":"_editable-list_vitro-editable-item-label_3ViAKDq","vitro-header-mobile":"_editable-list_vitro-header-mobile_2EMihKc"};
+var styles$1L = {"vitro-editable-list":"_editable-list_vitro-editable-list_2y8aXbO","vitro-header":"_editable-list_vitro-header_3ilVZhe","vitro-create-button":"_editable-list_vitro-create-button_3E1aQDB","vitro-editable-item":"_editable-list_vitro-editable-item_cWSWi1n","vitro-active":"_editable-list_vitro-active_39PUrSM","vitro-button-container":"_editable-list_vitro-button-container_1okfn08","vitro-dropdown-button":"_editable-list_vitro-dropdown-button_vPtNQxA","vitro-dropdown-menu-top":"_editable-list_vitro-dropdown-menu-top_1miFWtX","vitro-display-none":"_editable-list_vitro-display-none_1nqU_hD","vitro-mobile":"_editable-list_vitro-mobile_2IDiwft","vitro-editable-item-icon":"_editable-list_vitro-editable-item-icon_29jFw_f","vitro-editable-item-label":"_editable-list_vitro-editable-item-label_3ViAKDq","vitro-header-mobile":"_editable-list_vitro-header-mobile_2EMihKc"};
 
 var CSS_CLASS_MOBILE = 'vitro-mobile';
+var TRANSLATE_X = 49;
+var TRANSLATE_Y = 37;
 var EditableItem = function EditableItem(props) {
   var _useState = React.useState(props.text),
     text = _useState[0],
@@ -83758,6 +83802,19 @@ var EditableItem = function EditableItem(props) {
       props.onToggleDropdown(state);
     }
   };
+  var initDropdownMenuPosition = function initDropdownMenuPosition(element) {
+    if (element) {
+      var rect = element.getBoundingClientRect();
+      if (!element.classList.contains(styles$1L['vitro-dropdown-menu-top'])) {
+        if (rect.y > window.innerHeight) {
+          element.classList.add(styles$1L['vitro-dropdown-menu-top']);
+          element.style.transform = "translate(calc(100% - " + (TRANSLATE_X + UNIT.PX) + "), calc(-" + (props.scrollTop + UNIT.PX) + " - 100% - " + (TRANSLATE_Y + UNIT.PX) + "))";
+        } else {
+          element.style.transform = "translate(calc(100% - " + (TRANSLATE_X + UNIT.PX) + "), -" + (props.scrollTop + UNIT.PX) + ")";
+        }
+      }
+    }
+  };
   return React__default.createElement(FlexBox, {
     onMouseOver: function onMouseOver() {
       return setIsHover(true);
@@ -83780,27 +83837,22 @@ var EditableItem = function EditableItem(props) {
     autoFocus: true
   }) : React__default.createElement(Label, {
     text: props.text || text
-  }), props.isMobileView ? React__default.createElement("div", {
-    className: styles$1L['vitro-button-container']
-  }, dropdownItemList && dropdownItemList.length ? React__default.createElement(DropdownButton, {
-    itemList: dropdownItemList,
-    onToggle: onToggleDropdownButton,
-    isShow: props.isDropdownActive,
-    className: styles$1L['vitro-dropdown-button'],
-    isFlip: true,
-    popperConfig: props.popperConfig
-  }) : null) : React__default.createElement("div", {
+  }), React__default.createElement("div", {
     className: styles$1L['vitro-button-container']
   }, dropdownItemList && dropdownItemList.length ? React__default.createElement(DropdownButton, {
     itemList: dropdownItemList,
     onToggle: onToggleDropdownButton,
     isShow: props.isDropdownActive,
-    className: styles$1L['vitro-dropdown-button'] + (props.isActive || isHover ? CTRL.EMPTY : CTRL.SPACE + styles$1L['vitro-display-none'])
-  }) : null, props.button && React__default.createElement(FlexBox, {
+    className: styles$1L['vitro-dropdown-button'] + (!props.isMobileView ? props.isActive || isHover ? CTRL.EMPTY : CTRL.SPACE + styles$1L['vitro-display-none'] : CTRL.EMPTY),
+    isFlip: props.isMobileView,
+    popperConfig: props.popperConfig,
+    onGetMenuRef: initDropdownMenuPosition
+  }) : null, !props.isMobileView && props.button && React__default.createElement(FlexBox, {
     className: (props.isActive || isHover) && dropdownItemList ? styles$1L['vitro-display-none'] : CTRL.EMPTY
   }, props.button)));
 };
 
+var MemoList = React__default.memo(List);
 var EditableList = function EditableList(props) {
   var _useState = React.useState(),
     editedItem = _useState[0],
@@ -83811,6 +83863,9 @@ var EditableList = function EditableList(props) {
   var _useState3 = React.useState(),
     activeDropdownItemId = _useState3[0],
     setActiveDropdownItemId = _useState3[1];
+  var _useState4 = React.useState(0),
+    scrollTop = _useState4[0],
+    setScrollTop = _useState4[1];
   var changedFieldValueMap = React.useMemo(function () {
     return new Map();
   }, []);
@@ -83878,6 +83933,11 @@ var EditableList = function EditableList(props) {
       setActiveDropdownItemId(undefined);
     }
   };
+  var onScrollY = function onScrollY(e, element) {
+    if (element) {
+      setScrollTop(element.scrollTop);
+    }
+  };
   return React__default.createElement(FlexBox, {
     className: styles$1L['vitro-editable-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement(FlexBox, {
@@ -83890,7 +83950,9 @@ var EditableList = function EditableList(props) {
   }, React__default.createElement(ImageButton, {
     onClick: onCreate,
     className: styles$1L['vitro-create-button']
-  }))), React__default.createElement(List, {
+  }))), React__default.createElement(ScrollBar, {
+    onScrollY: onScrollY
+  }, React__default.createElement(MemoList, {
     itemList: props.itemList,
     itemTemplate: function itemTemplate(item) {
       return React__default.createElement(EditableItem, Object.assign({}, item, {
@@ -83911,7 +83973,8 @@ var EditableList = function EditableList(props) {
         getDropdownItemList: props.getDropdownItemList,
         isMobileView: props.isMobileView,
         icon: props.itemIcon,
-        popperConfig: props.popperConfig
+        popperConfig: props.popperConfig,
+        scrollTop: scrollTop
       }));
     },
     onClick: onClick
@@ -83926,7 +83989,7 @@ var EditableList = function EditableList(props) {
     isEditMode: props.isActiveNewItem === false ? false : true,
     isMobileView: props.isMobileView,
     icon: props.itemIcon
-  })));
+  }))));
 };
 
 var styles$1M = {"vitro-reorderable-list":"_reorderable-list_vitro-reorderable-list_3Vinbji","vitro-reorderable-item":"_reorderable-list_vitro-reorderable-item_2gH3muk","vitro-drag-button":"_reorderable-list_vitro-drag-button_2gzxwKx","vitro-dragged-item":"_reorderable-list_vitro-dragged-item_fft3ham","vitro-drop-zone":"_reorderable-list_vitro-drop-zone_15pbLJE","vitro-hidden":"_reorderable-list_vitro-hidden_2ZpMCYZ"};