@vitrosoftware/common-ui-ts 1.1.165 → 1.1.167

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

@@ -11,12 +11,10 @@
 
 .vitro-settings-dialog {
     border-radius: 4px;
+    margin-top: 4px;
     background: #fff;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
-    position: absolute;
-    top: 36px;
-    right: 0;
-    z-index: 2;
+    z-index: 100;
 }
 
 .vitro-filter-container {

package/dist/index.css

@@ -6981,12 +6981,10 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 
 ._search_vitro-settings-dialog_1_c5bIg {
     border-radius: 4px;
+    margin-top: 4px;
     background: #fff;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
-    position: absolute;
-    top: 36px;
-    right: 0;
-    z-index: 2;
+    z-index: 100;
 }
 
 ._search_vitro-filter-container_3p6D0hI {
@@ -8246,12 +8244,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 {
@@ -8284,7 +8293,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
@@ -60905,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", {
@@ -61803,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,
@@ -61936,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;) {
@@ -61969,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,
@@ -62003,7 +62002,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     isDisabled: props.isDisabled
   }), React__default.createElement("div", {
     className: 'vitro-content'
-  }, component));
+  }, getContent()));
 };
 
 var tabScriptList = [{
@@ -63013,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, {
@@ -63517,7 +63517,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.165";
+var version$1 = "1.1.167";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -67778,12 +67778,27 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
   var _props$filterContaine;
   var addFieldButtonRef = React.useRef(null);
   var addFieldListRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    };
+  }, []);
   React.useImperativeHandle(ref, function () {
     return {
       addFieldButtonRef: addFieldButtonRef.current,
       addFieldListRef: addFieldListRef.current
     };
   });
+  var onBlur = function onBlur(e) {
+    if (props.onBlur) {
+      var list = addFieldListRef.current;
+      var button = addFieldButtonRef.current;
+      if (list && !list.contains(e.target) && button && !button.contains(e.target)) {
+        props.onBlur(e);
+      }
+    }
+  };
   return React__default.createElement("div", {
     className: styles$1m['vitro-add-field']
   }, React__default.createElement(Button$2, {
@@ -67839,10 +67854,8 @@ var Search = function Search(props) {
   var searchRef = React.useRef(null);
   var filterContainerRef = React.useRef(null);
   React.useEffect(function () {
-    window.addEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     return function () {
-      window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
       window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     };
   }, []);
@@ -68019,13 +68032,8 @@ var Search = function Search(props) {
       closeSettings();
     }
   };
-  var onBlurAddFieldDialog = function onBlurAddFieldDialog(e) {
-    var _addFieldComponentRef, _addFieldComponentRef2;
-    var list = (_addFieldComponentRef = addFieldComponentRef.current) === null || _addFieldComponentRef === void 0 ? void 0 : _addFieldComponentRef.addFieldListRef;
-    var button = (_addFieldComponentRef2 = addFieldComponentRef.current) === null || _addFieldComponentRef2 === void 0 ? void 0 : _addFieldComponentRef2.addFieldButtonRef;
-    if (list && !list.contains(e.target) && button && !button.contains(e.target)) {
-      setIsShowAddFieldDialog(false);
-    }
+  var onBlurAddFieldDialog = function onBlurAddFieldDialog() {
+    setIsShowAddFieldDialog(false);
   };
   var onFocusInput = function onFocusInput() {
     setState(styles$1m['vitro-active']);
@@ -68059,7 +68067,8 @@ var Search = function Search(props) {
     checkboxFieldList: checkboxFieldList,
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
-    filterContainerRef: filterContainerRef
+    filterContainerRef: filterContainerRef,
+    onBlur: onBlurAddFieldDialog
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
     className: styles$1m['vitro-button-group']
   }, React__default.createElement(Button$2, {
@@ -68100,7 +68109,10 @@ var Search = function Search(props) {
     headerClassName: styles$1m['vitro-settings-dialog-header'],
     footerClassName: styles$1m['vitro-settings-dialog-footer'],
     isDismissible: true
-  }, content) : React__default.createElement(FlexBox, {
+  }, content) : React__default.createElement(Overlay$2, {
+    isShow: true,
+    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.END,
+    target: searchRef.current || undefined,
     className: styles$1m['vitro-settings-dialog']
   }, content)));
 };
@@ -83762,9 +83774,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],
@@ -83800,6 +83814,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);
@@ -83822,27 +83849,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],
@@ -83853,6 +83875,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();
   }, []);
@@ -83920,6 +83945,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, {
@@ -83932,7 +83962,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, {
@@ -83953,7 +83985,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
@@ -83968,7 +84001,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"};