@vitrosoftware/common-ui-ts 1.1.166 → 1.1.167

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 {

package/dist/index.js

@@ -63517,7 +63517,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.166";
+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)));
 };