@vitrosoftware/common-ui-ts 1.1.212 → 1.1.214

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -21,6 +21,10 @@
     padding: 0 16px;
 }
 
+.vitro-dropdown-toggle:focus-visible {
+    box-shadow: none;
+}
+
 .vitro-dropdown-menu :global(.ps__rail-y) {
     border: none;
 }
@@ -172,12 +176,11 @@
     padding-right: 8px;
 }
 
-.vitro-dropdown-menu :global(.dropdown-divider) {
-    margin: 0;
+.vitro-dropdown-menu .vitro-separator {
     border-top: 1px solid #E4E6EC;
 }
 
-.vitro-dropdown-menu :global(.dropdown-divider):nth-child(2) {
+.vitro-dropdown-menu .vitro-separator:nth-child(2) {
     border: none;
 }
 

package/css/std/controls/dxf-viewer/dxf-viewer-index.css

@@ -13739,10 +13739,10 @@ select {
     top: 48px;
     background-color: #fff;
     height: calc(100% - 48px);
-    border-left: 2px solid #eeeff0;
     display: none;
     z-index: 10;
     border-left: 1px solid #C0CAD5;
+    border-right: 1px solid transparent;
     box-shadow: 0 0 2.89px 0 rgba(0, 0, 0, 0.1), 0 0 7.22px 0 rgba(0, 0, 0, 0.08);
 }
 
@@ -14051,6 +14051,7 @@ select {
 }
 .vitro-panel {
     max-width: 40%;
+    box-sizing: border-box;
 }
 
 .vitro-resizer {

package/css/std/controls/dxf-viewer/dxf-viewer.css

@@ -166,10 +166,10 @@
     top: 48px;
     background-color: #fff;
     height: calc(100% - 48px);
-    border-left: 2px solid #eeeff0;
     display: none;
     z-index: 10;
     border-left: 1px solid #C0CAD5;
+    border-right: 1px solid transparent;
     box-shadow: 0 0 2.89px 0 rgba(0, 0, 0, 0.1), 0 0 7.22px 0 rgba(0, 0, 0, 0.08);
 }
 

package/css/std/controls/dxf-viewer/panel.css

@@ -1,5 +1,6 @@
 .vitro-panel {
     max-width: 40%;
+    box-sizing: border-box;
 }
 
 .vitro-resizer {

package/css/std/controls/scrollbar/scrollbar.css

@@ -1,8 +1,8 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
 
 .vitro-scrollbar-content {
-    height: 100%;
-    width: 100%;
+    min-height: 100%;
+    min-width: 100%;
 }
 
 :global(.ps) {

package/css/std/controls/search/search-dialog.css

@@ -110,22 +110,6 @@
     margin-top: auto;
 }
 
-.vitro-button,
-.vitro-button-cancel {
-    padding: 8px 16px;
-    font-family: 'InterRegular' !important;
-}
-
-.vitro-button-cancel {
-    background: #fff !important;
-    color: #222D44 !important;
-}
-
-.vitro-button-cancel:hover,
-.vitro-button-cancel:active {
-    background: #F3F8FF !important;
-}
-
 .vitro-settings-dialog-mobile {
     height: 100% !important;
     width: 100% !important;

package/css/std/controls/view/view.css

@@ -27,4 +27,6 @@
     padding: 22px 16px 0 16px;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
 }

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

@@ -1,4 +1,4 @@
-.vitro-view-part:last-child {
+.vitro-view-part:last-of-type {
     flex-grow: 1;
     max-height: 100%;
 }

package/dist/index.css

@@ -273,8 +273,8 @@ body em {
 @import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
 
 ._scrollbar_vitro-scrollbar-content_3HXSt5u {
-    height: 100%;
-    width: 100%;
+    min-height: 100%;
+    min-width: 100%;
 }
 
 .ps {
@@ -2276,6 +2276,10 @@ div._component-loader_vitro-component-loader_3J3a2or {
     padding: 0 16px;
 }
 
+._dropdown-button_vitro-dropdown-toggle_-Nj8qLe:focus-visible {
+    box-shadow: none;
+}
+
 ._dropdown-button_vitro-dropdown-menu_2B1Wr1Y .ps__rail-y {
     border: none;
 }
@@ -2427,12 +2431,11 @@ div._component-loader_vitro-component-loader_3J3a2or {
     padding-right: 8px;
 }
 
-._dropdown-button_vitro-dropdown-menu_2B1Wr1Y .dropdown-divider {
-    margin: 0;
+._dropdown-button_vitro-dropdown-menu_2B1Wr1Y ._dropdown-button_vitro-separator_3UJOlCk {
     border-top: 1px solid #E4E6EC;
 }
 
-._dropdown-button_vitro-dropdown-menu_2B1Wr1Y .dropdown-divider:nth-child(2) {
+._dropdown-button_vitro-dropdown-menu_2B1Wr1Y ._dropdown-button_vitro-separator_3UJOlCk:nth-child(2) {
     border: none;
 }
 
@@ -2607,7 +2610,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
     }
    
 }
-._view-part_vitro-view-part_3j_gZpl:last-child {
+._view-part_vitro-view-part_3j_gZpl:last-of-type {
     flex-grow: 1;
     max-height: 100%;
 }
@@ -2669,6 +2672,8 @@ div._component-loader_vitro-component-loader_3J3a2or {
     padding: 22px 16px 0 16px;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
 }
 
 ._tab-button-group_vitro-tab-button-group_18mZ_Ds {
@@ -3552,22 +3557,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
     margin-top: auto;
 }
 
-._search-dialog_vitro-button_2SQAGBl,
-._search-dialog_vitro-button-cancel_iBZogBR {
-    padding: 8px 16px;
-    font-family: 'InterRegular' !important;
-}
-
-._search-dialog_vitro-button-cancel_iBZogBR {
-    background: #fff !important;
-    color: #222D44 !important;
-}
-
-._search-dialog_vitro-button-cancel_iBZogBR:hover,
-._search-dialog_vitro-button-cancel_iBZogBR:active {
-    background: #F3F8FF !important;
-}
-
 ._search-dialog_vitro-settings-dialog-mobile_1vwSHz5 {
     height: 100% !important;
     width: 100% !important;
@@ -7707,12 +7696,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
     background: #F7F9FC;
 }
 
-._header_vitro-header_ta9aLJn {
-    position: relative;
-    width: 100%;
-    background-color: #F7F9FC;
-}
-
 ._header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc {
     height: 24px;
     width: 24px;
@@ -7750,6 +7733,12 @@ div._component-loader_vitro-component-loader_3J3a2or {
         min-height: 56px;
     }
 }
+._header_vitro-header_ta9aLJn {
+    position: relative;
+    width: 100%;
+    background-color: #F7F9FC;
+}
+
 ._header-nav-service_vitro-nav-service_1-i4GOh {
     height: 34px;
     padding: 0 16px;

package/dist/index.js

@@ -505,54 +505,65 @@ var Item = function Item(props) {
   }));
 };
 
+var ATTRIBUTE = function ATTRIBUTE() {};
+ATTRIBUTE.STYLE = 'style';
+ATTRIBUTE.CLASS = 'class';
+
+var DISPLAY = function DISPLAY() {};
+DISPLAY.NONE = 'none';
+
 var styles$1 = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3HXSt5u"};
 
+var CSS_CLASS_SCROLL_Y = 'ps-scroll-y';
 var w = window;
 var ScrollBar = function ScrollBar(props) {
-  var _useState = React.useState(null),
-    element = _useState[0],
-    setElement = _useState[1];
   var ref = React.useRef(null);
+  var scrollElementRef = React.useRef(null);
   var observerRef = React.useRef();
   React.useEffect(function () {
-    var checkRendered = function checkRendered() {
-      var _ref$current;
-      if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.offsetHeight && observerRef.current) {
-        ref.current.scrollTop = 3;
-        ref.current.scrollLeft = 3;
-        ref.current.scrollTop = 0;
-        ref.current.scrollLeft = 0;
-        observerRef.current.disconnect();
-      }
-    };
-    observerRef.current = new MutationObserver(function () {
-      return setTimeout(checkRendered, 50);
-    });
-    checkRendered();
-    if (ref.current) {
-      observerRef.current.observe(ref.current, {
-        childList: true,
-        subtree: true,
-        attributes: true
-      });
-    }
     return function () {
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
     };
   }, []);
+  var isDisplayNone = function isDisplayNone(element) {
+    var style = window.getComputedStyle(element);
+    return style.display === DISPLAY.NONE;
+  };
+  var update = function update() {
+    if (scrollElementRef.current) {
+      if (ref.current && !isDisplayNone(ref.current.parentElement) && observerRef.current) {
+        scrollElementRef.current.update();
+        observerRef.current.disconnect();
+      }
+    }
+  };
+  var addObserver = function addObserver() {
+    if (ref.current && isDisplayNone(ref.current.parentElement)) {
+      var _ref$current;
+      if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.parentElement) {
+        observerRef.current = new MutationObserver(function () {
+          return setTimeout(update, 50);
+        });
+        observerRef.current.observe(ref.current.parentElement, {
+          attributes: true,
+          attributeFilter: [ATTRIBUTE.STYLE, ATTRIBUTE.CLASS]
+        });
+      }
+    }
+  };
   React.useEffect(function () {
     if (ref.current) {
-      ref.current.addEventListener('ps-scroll-y', onScrollY);
+      ref.current.addEventListener(CSS_CLASS_SCROLL_Y, onScrollY);
       init();
     }
     return function () {
-      if (element) {
-        element.destroy();
+      if (scrollElementRef.current) {
+        scrollElementRef.current.destroy();
       }
       if (ref.current) {
-        ref.current.removeEventListener('ps-scroll-y', onScrollY);
+        ref.current.removeEventListener(CSS_CLASS_SCROLL_Y, onScrollY);
       }
     };
   }, []);
@@ -561,7 +572,7 @@ var ScrollBar = function ScrollBar(props) {
       var scrollElement = new w.PerfectScrollbar(ref.current, {
         suppressScrollX: props.isHideScrollX
       });
-      setElement(scrollElement);
+      scrollElementRef.current = scrollElement;
       if (w.addResizeListener && ref.current) {
         w.addResizeListener(ref.current.firstChild, function () {
           return scrollElement.update();
@@ -571,11 +582,12 @@ var ScrollBar = function ScrollBar(props) {
         props.onInit(ref.current);
       }
       if (props.isFocusOnScroll && ref.current) {
-        ref.current.addEventListener('ps-scroll-y', function () {
+        ref.current.addEventListener(CSS_CLASS_SCROLL_Y, function () {
           var _ref$current2;
           return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.click();
         });
       }
+      addObserver();
     }
   };
   var onWheel = function onWheel(e) {
@@ -593,7 +605,7 @@ var ScrollBar = function ScrollBar(props) {
     ref: props.contentRef,
     onWheel: onWheel,
     className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
-  }, element && props.children));
+  }, props.children));
 };
 
 (function (EVENT) {
@@ -21440,7 +21452,7 @@ var CELL_TYPE;
   CELL_TYPE["LIST"] = "List";
   CELL_TYPE["BOOL"] = "Bool";
 })(CELL_TYPE || (CELL_TYPE = {}));
-var ATTRIBUTE;
+var ATTRIBUTE$1;
 (function (ATTRIBUTE) {
   ATTRIBUTE["BUTTON"] = "Button";
   ATTRIBUTE["BUTTON_CLASS"] = "ButtonClass";
@@ -21463,7 +21475,7 @@ var ATTRIBUTE;
   ATTRIBUTE["ADDED"] = "Added";
   ATTRIBUTE["FORMULA"] = "Formula";
   ATTRIBUTE["FORMAT"] = "Format";
-})(ATTRIBUTE || (ATTRIBUTE = {}));
+})(ATTRIBUTE$1 || (ATTRIBUTE$1 = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
   DRAG_ITEM_TYPE[DRAG_ITEM_TYPE["CANNOT_DROP"] = 0] = "CANNOT_DROP";
@@ -21633,7 +21645,7 @@ var TableViewConstants = {
     get COLUMN () { return COLUMN; },
     get ROW_TYPE () { return ROW_TYPE; },
     get CELL_TYPE () { return CELL_TYPE; },
-    get ATTRIBUTE () { return ATTRIBUTE; },
+    get ATTRIBUTE () { return ATTRIBUTE$1; },
     get DRAG_ITEM_TYPE () { return DRAG_ITEM_TYPE; },
     get FILTER_TYPE () { return FILTER_TYPE; },
     get REFRESH_MODE () { return REFRESH_MODE; },
@@ -21758,7 +21770,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     } else {
       var row = this.grid.GetRowById(id);
       if (!row) {
-        row = this.grid.GetRowById(id, ATTRIBUTE.ID, false);
+        row = this.grid.GetRowById(id, ATTRIBUTE$1.ID, false);
       }
       return row;
     }
@@ -22105,7 +22117,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     return data;
   };
   _proto.setVisibleColumnListXml = function setVisibleColumnListXml(data) {
-    var visibleColumnNameList = this.getCols(ATTRIBUTE.VISIBLE);
+    var visibleColumnNameList = this.getCols(ATTRIBUTE$1.VISIBLE);
     if (this.visibleColumnList && this.visibleColumnList.length) {
       visibleColumnNameList = visibleColumnNameList.concat(this.visibleColumnList);
     }
@@ -61126,12 +61138,12 @@ var ActionHandler = function ActionHandler(props) {
   }));
 };
 
-var styles$q = {"vitro-dropdown-button-container":"_dropdown-button_vitro-dropdown-button-container_zx8iZtY","vitro-dropdown-toggle":"_dropdown-button_vitro-dropdown-toggle_-Nj8qLe","vitro-dropdown-menu":"_dropdown-button_vitro-dropdown-menu_2B1Wr1Y","vitro-right":"_dropdown-button_vitro-right_gHoXO9n","vitro-dropdown-button-item":"_dropdown-button_vitro-dropdown-button-item_2XZNxoG","vitro-dropdown-button-dropdown-item":"_dropdown-button_vitro-dropdown-button-dropdown-item_3Nwnp_-","vitro-image-container":"_dropdown-button_vitro-image-container_3Kf-a2A","vitro-button-collapse-bottom":"_dropdown-button_vitro-button-collapse-bottom_Ivm3AkU","vitro-image":"_dropdown-button_vitro-image_3bX1quk","vitro-scrollbar":"_dropdown-button_vitro-scrollbar_2DCwQvu","vitro-dropdown-button-dropdown-item-menu":"_dropdown-button_vitro-dropdown-button-dropdown-item-menu_39eSYtN"};
+var styles$q = {"vitro-dropdown-button-container":"_dropdown-button_vitro-dropdown-button-container_zx8iZtY","vitro-dropdown-toggle":"_dropdown-button_vitro-dropdown-toggle_-Nj8qLe","vitro-dropdown-menu":"_dropdown-button_vitro-dropdown-menu_2B1Wr1Y","vitro-right":"_dropdown-button_vitro-right_gHoXO9n","vitro-dropdown-button-item":"_dropdown-button_vitro-dropdown-button-item_2XZNxoG","vitro-dropdown-button-dropdown-item":"_dropdown-button_vitro-dropdown-button-dropdown-item_3Nwnp_-","vitro-image-container":"_dropdown-button_vitro-image-container_3Kf-a2A","vitro-button-collapse-bottom":"_dropdown-button_vitro-button-collapse-bottom_Ivm3AkU","vitro-image":"_dropdown-button_vitro-image_3bX1quk","vitro-scrollbar":"_dropdown-button_vitro-scrollbar_2DCwQvu","vitro-separator":"_dropdown-button_vitro-separator_3UJOlCk","vitro-dropdown-button-dropdown-item-menu":"_dropdown-button_vitro-dropdown-button-dropdown-item-menu_39eSYtN"};
 
 var DropdownButtonItem = function DropdownButtonItem(props) {
   var onClick = function onClick(e) {
     if (props.onClick) {
-      props.onClick(e);
+      props.onClick(props.value, e);
     } else if (props.href) {
       var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
         detail: {
@@ -61144,8 +61156,7 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
   return React__default.createElement(reactstrap.DropdownItem, {
     onClick: onClick,
     toggle: props.isToggle === false ? false : true,
-    divider: props.isShowSeparator,
-    className: styles$q['vitro-dropdown-button-item']
+    className: styles$q['vitro-dropdown-button-item'] + (props.isShowSeparator ? CTRL.SPACE + styles$q['vitro-separator'] : CTRL.EMPTY)
   }, (props.isShowImage || props.imageUrl) && React__default.createElement("div", {
     className: styles$q['vitro-image-container']
   }, props.imageUrl && React__default.createElement(Image, {
@@ -62798,7 +62809,7 @@ var List = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$H = {"vitro-settings-dialog":"_search-dialog_vitro-settings-dialog_33Qiusl","vitro-settings-dialog-mobile":"_search-dialog_vitro-settings-dialog-mobile_1vwSHz5","vitro-filter-container":"_search-dialog_vitro-filter-container_MNoN_7M","vitro-filter":"_search-dialog_vitro-filter_3K68vOp","vitro-field-iterator":"_search-dialog_vitro-field-iterator_3R98th9","vitro-add-field":"_search-dialog_vitro-add-field_2PfsCO8","vitro-add-field-button":"_search-dialog_vitro-add-field-button_22vr5DQ","vitro-add-field-dialog":"_search-dialog_vitro-add-field-dialog_2EdLwVO","vitro-button-group":"_search-dialog_vitro-button-group_3Uxi9An","vitro-button":"_search-dialog_vitro-button_2SQAGBl","vitro-button-cancel":"_search-dialog_vitro-button-cancel_iBZogBR","vitro-settings-dialog-header":"_search-dialog_vitro-settings-dialog-header_2CYAOiA","vitro-settings-dialog-footer":"_search-dialog_vitro-settings-dialog-footer_2H_8ImR","vitro-scrollbar":"_search-dialog_vitro-scrollbar_241tkXw"};
+var styles$H = {"vitro-settings-dialog":"_search-dialog_vitro-settings-dialog_33Qiusl","vitro-settings-dialog-mobile":"_search-dialog_vitro-settings-dialog-mobile_1vwSHz5","vitro-filter-container":"_search-dialog_vitro-filter-container_MNoN_7M","vitro-filter":"_search-dialog_vitro-filter_3K68vOp","vitro-field-iterator":"_search-dialog_vitro-field-iterator_3R98th9","vitro-add-field":"_search-dialog_vitro-add-field_2PfsCO8","vitro-add-field-button":"_search-dialog_vitro-add-field-button_22vr5DQ","vitro-add-field-dialog":"_search-dialog_vitro-add-field-dialog_2EdLwVO","vitro-button-group":"_search-dialog_vitro-button-group_3Uxi9An","vitro-settings-dialog-header":"_search-dialog_vitro-settings-dialog-header_2CYAOiA","vitro-settings-dialog-footer":"_search-dialog_vitro-settings-dialog-footer_2H_8ImR","vitro-scrollbar":"_search-dialog_vitro-scrollbar_241tkXw"};
 
 var AddFieldButton = React.forwardRef(function (props, ref) {
   var _props$filterContaine;
@@ -66444,8 +66455,6 @@ var LOCALE$8;
 
 var CSS_CLASS_FILTER_CONTAINER$1 = 'vitro-filter-container';
 var CSS_CLASS_BUTTON_GROUP = 'vitro-button-group';
-var CSS_CLASS_BUTTON_CANCEL = 'vitro-button-cancel';
-var CSS_CLASS_BUTTON = 'vitro-button';
 var CSS_CLASS_SETTINGS_DIALOG_MOBILE = 'vitro-settings-dialog-mobile';
 var CSS_CLASS_SETTINGS_DIALOG_HEADER = 'vitro-settings-dialog-header';
 var CSS_CLASS_SETTINGS_DIALOG_FOOTER = 'vitro-settings-dialog-footer';
@@ -66484,14 +66493,13 @@ var SearchDialog = function SearchDialog(props) {
     feature: props.feature
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
     className: styles$H[CSS_CLASS_BUTTON_GROUP]
-  }, React__default.createElement(Button$2, {
+  }, React__default.createElement(ButtonCancel, {
     text: getSearchLabel(ACTION$2.CANCEL),
-    onClick: props.onCancel,
-    className: styles$H[CSS_CLASS_BUTTON_CANCEL]
+    onClick: props.onCancel
   }), React__default.createElement(Button$2, {
     text: getSearchLabel(ACTION$2.SEARCH),
     onClick: props.onSearch,
-    className: styles$H[CSS_CLASS_BUTTON]
+    className: STYLE.PRIMARY
   }))));
   return React__default.createElement(React__default.Fragment, null, props.isShowDialog && (props.isMobileView ? React__default.createElement(Dialog, {
     title: props.title || CTRL.EMPTY,
@@ -66556,6 +66564,7 @@ var Search = function Search(props) {
   }, []);
   var onViewChanged = React.useCallback(function () {
     setSearchCriterionList([]);
+    setSendedSearchCriterionList([]);
   }, []);
   React.useEffect(function () {
     eventService.register({
@@ -67014,7 +67023,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.212";
+var version$1 = "1.1.214";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -83432,6 +83441,7 @@ var SplitterConstants = {
 
 var Splitter = function Splitter(props) {
   var ref = React.useRef();
+  var localStorageService = inversifyReact.useInjection(SERVICE.LOCAL_STORAGE);
   var resizeObserver = new window.ResizeObserver(function (entries) {
     for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
       var entry = _step.value;
@@ -83459,17 +83469,45 @@ var Splitter = function Splitter(props) {
     }
     return value;
   };
+  var getPaneWidthFromLocalSorage = function getPaneWidthFromLocalSorage() {
+    return props.localStorageKey ? localStorageService.getItem(props.localStorageKey) : undefined;
+  };
+  var setPaneWidthToLocalSorage = function setPaneWidthToLocalSorage(width) {
+    if (props.localStorageKey) {
+      localStorageService.setItem(props.localStorageKey, width);
+    }
+  };
+  var getWidthPercent = function getWidthPercent(paneWidth, wrapperWidth) {
+    var width = wrapperWidth ? Math.round(paneWidth * 100 / wrapperWidth * 100) / 100 : 0;
+    return wrapperWidth ? getWidth(width) : getWidth(0);
+  };
+  var onDragFinished = function onDragFinished() {
+    if (props.localStorageKey) {
+      var paneWidth = ref.current.state.primaryPane;
+      var wrapperWidth = ref.current.paneWrapper.clientWidth;
+      var width = props.isWidthPx ? paneWidth : getWidthPercent(paneWidth, wrapperWidth);
+      setPaneWidthToLocalSorage(width);
+    }
+    if (props.onDragFinished) {
+      props.onDragFinished();
+    }
+  };
+  var getPrimaryPaneWidth = function getPrimaryPaneWidth() {
+    var localStorageWidth = getPaneWidthFromLocalSorage();
+    var primaryPaneWidth = localStorageWidth ? localStorageWidth : getWidth(props.width ? props.width : WIDTH.DEFAULT);
+    return primaryPaneWidth;
+  };
   return React__default.createElement(ReactSplitter, {
     ref: ref,
     position: props.position || POSITION$1.VERTICAL,
     primaryPaneMaxWidth: getWidth(props.maxWidth ? props.maxWidth : WIDTH.DEFAULT_MAX),
     primaryPaneMinWidth: getWidth(props.minWidth ? props.minWidth : WIDTH.DEFAULT_MIN),
-    primaryPaneWidth: getWidth(props.width ? props.width : WIDTH.DEFAULT),
+    primaryPaneWidth: getPrimaryPaneWidth(),
     postPoned: props.isPostPoned,
     maximizedPrimaryPane: props.isMaximizedPrimaryPane,
     minimalizedPrimaryPane: props.isMinimalizedPrimaryPane,
     dispatchResize: props.isDispatchResize,
-    onDragFinished: props.onDragFinished,
+    onDragFinished: onDragFinished,
     className: props.className
   }, props.children);
 };
@@ -83810,6 +83848,25 @@ var PageLayout = function PageLayout(props) {
   }, props.children);
 };
 
+var styles$1x = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+
+var SidebarButton = function SidebarButton(props) {
+  return React__default.createElement("button", {
+    className: styles$1x['vitro-nav-bar-sidebar-button'],
+    onClick: props.onClick
+  });
+};
+
+var styles$1y = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+
+var HeaderNavBar = function HeaderNavBar(props) {
+  return React__default.createElement("nav", {
+    className: styles$1y['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+  }, React__default.createElement(SidebarButton, {
+    onClick: props.onChangeSidebarMode
+  }), props.children);
+};
+
 var LOCAL_STORAGE_KEY;
 (function (LOCAL_STORAGE_KEY) {
   LOCAL_STORAGE_KEY["SIDEBAR_MODE"] = "app.common.sidebar.mode";
@@ -83820,72 +83877,44 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$1x = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$1z = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
+  var _useState = React.useState(),
+    sidebar = _useState[0],
+    setSidebar = _useState[1];
   var ref = React.useRef(null);
   var localStorageService = inversifyReact.useInjection(SERVICE.LOCAL_STORAGE);
   var allowedSidebarFullMode = props.cfgSidebar && props.cfgSidebar.overflowItemList && props.cfgSidebar.overflowItemList.length > 0;
-  var mobileView = function mobileView() {
-    return window.innerWidth <= exports.MOBILE_VIEW.WIDTH;
-  };
+  React.useEffect(function () {
+    if (sidebar === undefined) {
+      var sidebarMode = localStorageService.getItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE);
+      onChange(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
+    } else {
+      onChange(sidebar);
+    }
+  }, []);
   onChangeSidebarMode = function onChangeSidebarMode() {
-    var newMode = props.sidebar < MODE.PINNED ? props.sidebar + MODE.TOGGLED_HOVERED : MODE.TOGGLED_PINNED;
+    var oldMode = sidebar != null ? sidebar : MODE.TOGGLED_PINNED;
+    var newMode = oldMode < MODE.PINNED ? oldMode + MODE.TOGGLED_HOVERED : MODE.TOGGLED_PINNED;
     if (!allowedSidebarFullMode && newMode === MODE.TOGGLED_HOVERED) {
       newMode = MODE.PINNED;
     }
-    props.setSidebar(newMode);
+    onChange(newMode);
   };
-  var setSidebarMode = function setSidebarMode() {
-    var sidebar = window.document.getElementById('vitro-sidebar');
-    if (sidebar && ref && ref.current) {
-      sidebar.style.paddingTop = ref.current.clientHeight + UNIT.PX;
-    }
-    if (mobileView() && props.sidebar === MODE.TOGGLED_PINNED) {
-      props.setSidebar(MODE.PINNED);
-    }
+  var onChange = function onChange(mode) {
+    setSidebar(mode);
+    localStorageService.setItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE, mode);
+    props.onChangeSidebar(mode);
   };
-  React.useEffect(function () {
-    setSidebarMode();
-    if (window.addResizeListener) {
-      window.addResizeListener(ref.current, function () {
-        setSidebarMode();
-      });
-    }
-  }, [ref.current]);
-  React.useEffect(function () {
-    if (props.sidebar >= 0 && props.sidebar !== null) {
-      localStorageService.setItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE, props.sidebar);
-    } else {
-      var sidebarMode = localStorageService.getItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE);
-      props.setSidebar(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
-    }
-  }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$1x['vitro-header'],
+    className: styles$1z['vitro-header'],
     id: 'vitro-header',
     ref: ref
-  }, props.children);
-};
-
-var styles$1y = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
-
-var SidebarButton = function SidebarButton(props) {
-  return React__default.createElement("button", {
-    className: styles$1y['vitro-nav-bar-sidebar-button'],
-    onClick: props.onClick
-  });
-};
-
-var styles$1z = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
-
-var HeaderNavBar = function HeaderNavBar(props) {
-  return React__default.createElement("nav", {
-    className: styles$1z['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
-  }, React__default.createElement(SidebarButton, {
-    onClick: onChangeSidebarMode
-  }), props.children);
+  }, React__default.createElement(HeaderNavBar, {
+    onChangeSidebarMode: onChangeSidebarMode
+  }, props.children));
 };
 
 var styles$1A = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
@@ -85037,6 +85066,7 @@ var EditableList = function EditableList(props) {
   }, [props.activeItemId]);
   React.useEffect(function () {
     changedFieldValueMap.clear();
+    setActiveDropdownItemId(undefined);
   }, [props.itemList]);
   var onClick = function onClick(item, isTargetDropDownBtn) {
     if (!props.isMobileView || !isTargetDropDownBtn) {