@vitrosoftware/common-ui-ts 1.1.182 → 1.1.184

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

@@ -1,7 +1,10 @@
 .vitro-editable-list {
     flex-direction: column;
-    max-height: 100%;
-    padding: 19px 0 19px 24px;
+    padding: 0 0 0 24px;
+}
+
+.vitro-editable-list > div {
+    width: 100%;
 }
 
 .vitro-editable-list > :global(.ps) {
@@ -16,7 +19,7 @@
 .vitro-header {
     width: 100%;
     min-height: 32px;
-    padding: 0px 28px 0 4px;
+    padding: 0px 4px 0 4px;
 }
 
 .vitro-create-button {
@@ -115,6 +118,10 @@
     height: 24px;
 }
 
+.vitro-readonly {
+    pointer-events: none;
+}
+
 .vitro-editable-item.vitro-mobile .vitro-editable-item-label {
     white-space: pre-wrap !important;
     padding-left: 8px;

package/dist/index.css

@@ -8231,8 +8231,11 @@ 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;
+    padding: 0 0 0 24px;
+}
+
+._editable-list_vitro-editable-list_2y8aXbO > div {
+    width: 100%;
 }
 
 ._editable-list_vitro-editable-list_2y8aXbO > .ps {
@@ -8247,7 +8250,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 ._editable-list_vitro-header_3ilVZhe {
     width: 100%;
     min-height: 32px;
-    padding: 0px 28px 0 4px;
+    padding: 0px 4px 0 4px;
 }
 
 ._editable-list_vitro-create-button_3E1aQDB {
@@ -8346,6 +8349,10 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     height: 24px;
 }
 
+._editable-list_vitro-readonly_2pK9bq5 {
+    pointer-events: none;
+}
+
 ._editable-list_vitro-editable-item_cWSWi1n._editable-list_vitro-mobile_2IDiwft ._editable-list_vitro-editable-item-label_3ViAKDq {
     white-space: pre-wrap !important;
     padding-left: 8px;

package/dist/index.js

@@ -63020,7 +63020,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.182";
+var version$1 = "1.1.184";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -83999,9 +83999,10 @@ 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-editable-list-mobile":"_editable-list_vitro-editable-list-mobile_z1t_hAF","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 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-editable-list-mobile":"_editable-list_vitro-editable-list-mobile_z1t_hAF","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-readonly":"_editable-list_vitro-readonly_2pK9bq5","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 CSS_DROPDOWN_MENU_TOP = 'vitro-dropdown-menu-top';
 var TRANSLATE_X = 49;
 var TRANSLATE_Y = 37;
 var EditableItem = function EditableItem(props) {
@@ -84044,9 +84045,9 @@ var EditableItem = function EditableItem(props) {
   var initDropdownMenuPosition = function initDropdownMenuPosition(element) {
     if (element) {
       var rect = element.getBoundingClientRect();
-      if (!element.classList.contains(styles$1L['vitro-dropdown-menu-top'])) {
+      if (!isDropdownMenuTop(element.classList) || isDropdownMenuTop(element.classList) && rect.y > window.innerHeight) {
         if (rect.y > window.innerHeight) {
-          element.classList.add(styles$1L['vitro-dropdown-menu-top']);
+          element.classList.add(styles$1L[CSS_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) + ")";
@@ -84054,6 +84055,15 @@ var EditableItem = function EditableItem(props) {
       }
     }
   };
+  var isDropdownMenuTop = function isDropdownMenuTop(classList) {
+    var isMenuTop = false;
+    classList.forEach(function (val) {
+      if (val.includes(CSS_DROPDOWN_MENU_TOP)) {
+        isMenuTop = true;
+      }
+    });
+    return isMenuTop;
+  };
   return React__default.createElement(FlexBox, {
     onMouseOver: function onMouseOver() {
       return setIsHover(true);
@@ -84078,7 +84088,7 @@ var EditableItem = function EditableItem(props) {
     text: props.text || text
   }), React__default.createElement("div", {
     className: styles$1L['vitro-button-container']
-  }, props.dropdownItemList || props.getDropdownItemList ? React__default.createElement(DropdownButton, {
+  }, !props.isReadOnly && (props.dropdownItemList || props.getDropdownItemList) ? React__default.createElement(DropdownButton, {
     itemList: dropdownItemList,
     onToggle: onToggleDropdownButton,
     isShow: props.isDropdownActive,
@@ -84087,7 +84097,7 @@ var EditableItem = function EditableItem(props) {
     popperConfig: props.popperConfig,
     onGetMenuRef: props.isMobileView ? undefined : initDropdownMenuPosition
   }) : null, !props.isMobileView && props.button && React__default.createElement(FlexBox, {
-    className: (props.isActive || isHover) && (props.dropdownItemList || props.getDropdownItemList) ? styles$1L['vitro-display-none'] : CTRL.EMPTY
+    className: !props.isReadOnly && (props.isActive || isHover) && (props.dropdownItemList || props.getDropdownItemList) ? styles$1L['vitro-display-none'] : props.isReadOnly ? styles$1L['vitro-readonly'] : CTRL.EMPTY
   }, props.button)));
 };
 
@@ -84106,19 +84116,17 @@ 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();
   }, []);
   React.useEffect(function () {
     setEditedItem(props.editedItemId || CTRL.EMPTY);
     if (props.editedItemId) {
-      if (props.onStartEdit) {
-        props.onStartEdit(props.itemList.find(function (val) {
-          return val.id === props.editedItemId;
-        }));
+      var _editedItem = props.itemList.find(function (val) {
+        return val.id === props.editedItemId;
+      });
+      if (props.onStartEdit && _editedItem) {
+        props.onStartEdit(_editedItem);
       }
       setActiveItem(props.editedItemId);
     }
@@ -84176,11 +84184,6 @@ 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[CSS_CLASS_EDITABLE_LIST] + (props.isMobileView ? CTRL.SPACE + styles$1L[CSS_CLASS_EDITABLE_LIST_MOBILE] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement(FlexBox, {
@@ -84214,7 +84217,8 @@ var EditableList = function EditableList(props) {
         getDropdownItemList: props.getDropdownItemList,
         isMobileView: props.isMobileView,
         icon: props.itemIcon,
-        popperConfig: props.popperConfig
+        popperConfig: props.popperConfig,
+        isReadOnly: props.isReadOnly
       }));
     },
     onClick: onClick
@@ -84229,9 +84233,7 @@ var EditableList = function EditableList(props) {
     isEditMode: props.isActiveNewItem === false ? false : true,
     isMobileView: props.isMobileView,
     icon: props.itemIcon
-  }))) : React__default.createElement(ScrollBar, {
-    onScrollY: onScrollY
-  }, React__default.createElement(List, {
+  }))) : React__default.createElement("div", null, React__default.createElement(List, {
     itemList: props.itemList,
     itemTemplate: function itemTemplate(item) {
       return React__default.createElement(EditableItem, Object.assign({}, item, {
@@ -84253,7 +84255,8 @@ var EditableList = function EditableList(props) {
         isMobileView: props.isMobileView,
         icon: props.itemIcon,
         popperConfig: props.popperConfig,
-        scrollTop: scrollTop
+        scrollTop: props.scrollTop,
+        isReadOnly: props.isReadOnly
       }));
     },
     onClick: onClick