@vitrosoftware/common-ui-ts 1.1.168 → 1.1.169

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

@@ -48,7 +48,7 @@
     margin-left: auto;
 }
 
-.vitro-dropdown-button :global(.dropdown-menu) {
+.vitro-editable-list:not(.vitro-editable-list-mobile) .vitro-dropdown-button :global(.dropdown-menu) {
     position: fixed !important;
     inset: auto 0 auto 0 !important;
 }

package/dist/index.css

@@ -8292,7 +8292,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     margin-left: auto;
 }
 
-._editable-list_vitro-dropdown-button_vPtNQxA .dropdown-menu {
+._editable-list_vitro-editable-list_2y8aXbO:not(._editable-list_vitro-editable-list-mobile_z1t_hAF) ._editable-list_vitro-dropdown-button_vPtNQxA .dropdown-menu {
     position: fixed !important;
     inset: auto 0 auto 0 !important;
 }

package/dist/index.js

@@ -63521,7 +63521,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.168";
+var version$1 = "1.1.169";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -83778,7 +83778,7 @@ 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-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-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;
@@ -83862,12 +83862,17 @@ var EditableItem = function EditableItem(props) {
     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
+    onGetMenuRef: props.isMobileView ? undefined : 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 CSS_CLASS_EDITABLE_LIST = 'vitro-editable-list';
+var CSS_CLASS_EDITABLE_LIST_MOBILE = 'vitro-editable-list-mobile';
+var CSS_CLASS_HEADER = 'vitro-header';
+var CSS_CLASS_HEADER_MOBILE = 'vitro-header-mobile';
+var CSS_CLASS_CREATE_BUTTON = 'vitro-create-button';
 var MemoList = React__default.memo(List);
 var EditableList = function EditableList(props) {
   var _useState = React.useState(),
@@ -83955,9 +83960,9 @@ var EditableList = function EditableList(props) {
     }
   };
   return React__default.createElement(FlexBox, {
-    className: styles$1L['vitro-editable-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    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, {
-    className: styles$1L['vitro-header'] + (props.isMobileView ? CTRL.SPACE + styles$1L['vitro-header-mobile'] : CTRL.EMPTY)
+    className: styles$1L[CSS_CLASS_HEADER] + (props.isMobileView ? CTRL.SPACE + styles$1L[CSS_CLASS_HEADER_MOBILE] : CTRL.EMPTY)
   }, props.title && React__default.createElement(Heading, {
     tag: TAG.H3,
     text: props.title
@@ -83965,8 +83970,44 @@ var EditableList = function EditableList(props) {
     text: props.createButtonTooltip || CTRL.EMPTY
   }, React__default.createElement(ImageButton, {
     onClick: onCreate,
-    className: styles$1L['vitro-create-button']
-  }))), React__default.createElement(ScrollBar, {
+    className: styles$1L[CSS_CLASS_CREATE_BUTTON]
+  }))), props.isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MemoList, {
+    itemList: props.itemList,
+    itemTemplate: function itemTemplate(item) {
+      return React__default.createElement(EditableItem, Object.assign({}, item, {
+        text: changedFieldValueMap.get(item.id) || item.text,
+        onChange: function onChange(value) {
+          return _onChange(item, value);
+        },
+        onBlur: function onBlur(value) {
+          return _onBlur(item, value);
+        },
+        onToggleDropdown: function onToggleDropdown(state) {
+          return _onToggleDropdown(item, state);
+        },
+        isActive: activeItem === item.id,
+        isEditMode: editedItem === item.id,
+        isDropdownActive: activeDropdownItemId === item.id,
+        button: props.getItemButton ? props.getItemButton(item) : null,
+        getDropdownItemList: props.getDropdownItemList,
+        isMobileView: props.isMobileView,
+        icon: props.itemIcon,
+        popperConfig: props.popperConfig
+      }));
+    },
+    onClick: onClick
+  }), props.newItem && React__default.createElement(EditableItem, Object.assign({}, props.newItem, {
+    onChange: function onChange(value) {
+      return props.newItem && _onChange(props.newItem, value);
+    },
+    onBlur: function onBlur(value) {
+      return props.newItem && _onBlur(props.newItem, value);
+    },
+    isActive: props.isActiveNewItem === false ? false : true,
+    isEditMode: props.isActiveNewItem === false ? false : true,
+    isMobileView: props.isMobileView,
+    icon: props.itemIcon
+  }))) : React__default.createElement(ScrollBar, {
     onScrollY: onScrollY
   }, React__default.createElement(MemoList, {
     itemList: props.itemList,