@vitrosoftware/common-ui-ts 1.1.192 → 1.1.193

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

@@ -35,6 +35,10 @@
     gap: 24px;
 }
 
+.vitro-title {
+    align-items: flex-start;
+}
+
 @media (max-width: 800px) {
     .vitro-dialog-header {
         padding: 12px 16px;

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

@@ -69,6 +69,11 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dropdown-button/img/dropdown-menu-arrow.svg');
 }
 
+:global(.vitro-file-list[placement="top-end"])::before {
+    transform: rotate(180deg);
+    top: 100%;
+}
+
 :global(.vitro-file-list-main) {
     background: #F7F9FC;
     border-radius: 4px;

package/css/std/controls/lookup-picker/lookup-picker.css

@@ -82,6 +82,7 @@
 
 .vitro-content > .vitro-value-container {
     min-width: 0;
+    flex: 1 1;
 }
 
 .vitro-lookup-picker-multi-select .vitro-content > vitro-value-container. > input {

package/css/std/controls/overlay/overlay.css

@@ -1,5 +1,6 @@
 .vitro-overlay {
     z-index: 1;
+    position: absolute;
 }
 
 .vitro-dropdown-arrow:before {
@@ -16,3 +17,7 @@
     top: -21px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dropdown-button/img/dropdown-menu-arrow.svg');
 }
+
+.vitro-visibility-hidden {
+    visibility: hidden;
+}

package/dist/index.css

@@ -1534,6 +1534,10 @@ div._component-loader_vitro-component-loader_3J3a2or {
     gap: 24px;
 }
 
+._dialog-header_vitro-title_2k8SPhE {
+    align-items: flex-start;
+}
+
 @media (max-width: 800px) {
     ._dialog-header_vitro-dialog-header_2W3GraU {
         padding: 12px 16px;
@@ -4511,6 +4515,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
 
 ._lookup-picker_vitro-content_37L0slb > ._lookup-picker_vitro-value-container_3GeBIaW {
     min-width: 0;
+    flex: 1 1;
 }
 
 ._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-content_37L0slb > vitro-value-container. > input {
@@ -4579,6 +4584,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
 }
 ._overlay_vitro-overlay_3SpYfCG {
     z-index: 1;
+    position: absolute;
 }
 
 ._overlay_vitro-dropdown-arrow_33kJJVJ:before {
@@ -4595,6 +4601,10 @@ div._component-loader_vitro-component-loader_3J3a2or {
     top: -21px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dropdown-button/img/dropdown-menu-arrow.svg');
 }
+
+._overlay_vitro-visibility-hidden_1zcpvxJ {
+    visibility: hidden;
+}
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq {
     width: 100%;
@@ -8709,6 +8719,11 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dropdown-button/img/dropdown-menu-arrow.svg');
 }
 
+.vitro-file-list[placement="top-end"]::before {
+    transform: rotate(180deg);
+    top: 100%;
+}
+
 .vitro-file-list-main {
     background: #F7F9FC;
     border-radius: 4px;

package/dist/index.js

@@ -61019,7 +61019,7 @@ var HeadingConstants = {
     get TAG () { return TAG; }
 };
 
-var styles$g = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-subtitle":"_dialog-header_vitro-subtitle_3mjvJAN","vitro-image":"_dialog-header_vitro-image_3TdbvmV","vitro-title-container":"_dialog-header_vitro-title-container_c5zBWdq"};
+var styles$g = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-subtitle":"_dialog-header_vitro-subtitle_3mjvJAN","vitro-image":"_dialog-header_vitro-image_3TdbvmV","vitro-title-container":"_dialog-header_vitro-title-container_c5zBWdq","vitro-title":"_dialog-header_vitro-title_2k8SPhE"};
 
 var DialogHeader = function DialogHeader(props) {
   return React__default.createElement(FlexBox, {
@@ -61030,6 +61030,7 @@ var DialogHeader = function DialogHeader(props) {
   }), props.image, React__default.createElement(FlexBox, {
     className: styles$g['vitro-title-container']
   }, React__default.createElement(FlexBox, {
+    className: styles$g['vitro-title'],
     isColumn: true
   }, props.title && React__default.createElement(Heading, {
     tag: TAG.H1,
@@ -63111,7 +63112,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.192";
+var version$1 = "1.1.193";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -65271,7 +65272,7 @@ var MODIFIER;
   MODIFIER["FLIP"] = "flip";
 })(MODIFIER || (MODIFIER = {}));
 
-var styles$W = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ"};
+var styles$W = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ","vitro-visibility-hidden":"_overlay_vitro-visibility-hidden_1zcpvxJ"};
 
 var Overlay$2 = React.forwardRef(function (props, ref) {
   var _useState = React.useState(null),
@@ -65286,6 +65287,11 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   var _useState4 = React.useState(),
     popperConfig = _useState4[0],
     setPopperConfig = _useState4[1];
+  var _useState5 = React.useState(1),
+    zIndex = _useState5[0],
+    setZIndex = _useState5[1];
+  var overlayRef = React.useRef(null);
+  var onEnteredFuncRef = React.useRef();
   React.useImperativeHandle(ref, function () {
     return {
       setTarget: function setTarget(target) {
@@ -65293,25 +65299,29 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
       },
       setStyle: function setStyle(style) {
         _setStyle(style);
+      },
+      setOnEntered: function setOnEntered(onEntered) {
+        onEnteredFuncRef.current = onEntered;
       }
     };
   });
   React.useEffect(function () {
-    if (props.isFlip && props.isVertical) {
+    if (props.isFlip !== false && !props.placement || props.placement && props.allowedAutoPlacements) {
       setPopperConfig({
         modifiers: [{
           name: MODIFIER.FLIP,
           options: {
-            allowedAutoPlacements: [[exports.PLACEMENT.TOP, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.BOTTOM, exports.PLACEMENT.START].join(CTRL.DASH)],
+            allowedAutoPlacements: props.allowedAutoPlacements || [[exports.PLACEMENT.TOP, exports.PLACEMENT.END].join(CTRL.DASH), [exports.PLACEMENT.BOTTOM, exports.PLACEMENT.END].join(CTRL.DASH)],
             flipVariations: false
           }
         }]
       });
     }
-  }, []);
+  }, [props.isFlip, props.allowedAutoPlacements, props.placement]);
   React.useEffect(function () {
     if (props.target) {
       _setTarget(props.target);
+      setZIndex(getZIndex(props.target));
     }
   }, [props.target]);
   React.useEffect(function () {
@@ -65326,29 +65336,58 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
       setContainer(getContainer(target));
     }
   }, [props.container, target]);
-  var getContainer = function getContainer(el) {
-    for (; el && el !== document; el = el.parentNode) {
+  var getContainer = function getContainer(target) {
+    var parent = findParentByCondition(target, function (el) {
       var _el$dataset;
-      if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.type) === 'app') {
-        return el;
+      return ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.type) === 'app';
+    });
+    return parent || document.body;
+  };
+  var getZIndex = function getZIndex(target) {
+    var parent = findParentByCondition(target, function (el) {
+      var compStyle = window.getComputedStyle(el);
+      if (+compStyle.zIndex >= 0 && compStyle.position !== 'absolute') {
+        return true;
+      }
+      return false;
+    });
+    if (parent) {
+      return +window.getComputedStyle(parent).zIndex;
+    }
+    return 1;
+  };
+  var findParentByCondition = function findParentByCondition(target, condition) {
+    for (; target && target !== document; target = target.parentNode) {
+      if (condition(target)) {
+        return target;
       }
     }
-    return document.body;
   };
-  var className = [styles$W['vitro-overlay'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$W['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
-  if (!target || !container) {
+  var onEntered = function onEntered(element, isEntered) {
+    if (element) {
+      element.style.zIndex = zIndex.toString();
+      element.classList.remove(styles$W['vitro-visibility-hidden']);
+    }
+    if (onEnteredFuncRef.current) {
+      onEnteredFuncRef.current(element, isEntered);
+    }
+  };
+  var className = [styles$W['vitro-overlay'], styles$W['vitro-visibility-hidden'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$W['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
+  if (!container || !target) {
     return null;
   }
   return React__default.createElement(Overlay$1, {
     show: props.isShow,
     target: target,
     container: container,
-    placement: props.placement || (props.isFlip && props.isVertical ? [exports.PLACEMENT.AUTO, exports.PLACEMENT.START].join(CTRL.DASH) : exports.PLACEMENT.AUTO),
-    flip: props.isFlip ? true : false,
-    popperConfig: popperConfig
+    placement: props.placement || (props.isFlip !== false ? [exports.PLACEMENT.AUTO, exports.PLACEMENT.END].join(CTRL.DASH) : exports.PLACEMENT.AUTO),
+    flip: props.isFlip === false ? false : true,
+    popperConfig: popperConfig,
+    onEntered: onEntered
   }, React__default.createElement("div", {
     className: className,
-    style: style
+    style: style,
+    ref: overlayRef
   }, props.children));
 });
 
@@ -65431,8 +65470,7 @@ var ValueList = function ValueList(props) {
     placement: props.placement,
     isFlip: props.isFlip,
     className: valueListStyles['vitro-value-list'],
-    style: style ? style : {},
-    isVertical: true
+    style: style ? style : {}
   }, React__default.createElement("div", {
     onMouseDown: onMouseDown
   }, React__default.createElement(ScrollBar, {
@@ -67515,8 +67553,9 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   }) : condition.text), React__default.createElement(Overlay$2, {
     isShow: showSelectList,
     isFlip: true,
+    placement: [exports.PLACEMENT.AUTO, exports.PLACEMENT.START].join(CTRL.DASH),
+    allowedAutoPlacements: [[exports.PLACEMENT.BOTTOM, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.TOP, exports.PLACEMENT.START].join(CTRL.DASH)],
     target: ref.current,
-    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START,
     className: styles$1g['vitro-condition-list-container']
   }, React__default.createElement(List, {
     ref: listRef,
@@ -67879,7 +67918,6 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     isClearChangedFieldValueMap: props.isClearChangedFieldValueMap,
     className: styles$1j['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }) : React__default.createElement(ScrollBar, {
@@ -67890,7 +67928,6 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     isClearChangedFieldValueMap: props.isClearChangedFieldValueMap,
     className: styles$1j['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
@@ -68252,11 +68289,12 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     imageClassName: props.imageClassName
   }), React__default.createElement(Overlay$2, {
     isShow: props.isShowAddFieldDialog,
-    isFlip: props.isMobileView,
+    isFlip: props.isFlip,
     target: addFieldButtonRef.current,
     container: (_props$filterContaine = props.filterContainerRef) !== null && _props$filterContaine !== void 0 && _props$filterContaine.current ? props.filterContainerRef.current : undefined,
-    placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
-    className: styles$1n['vitro-add-field-dialog']
+    placement: props.isMobileView ? undefined : exports.PLACEMENT.AUTO + CTRL.DASH + exports.PLACEMENT.START,
+    className: styles$1n['vitro-add-field-dialog'],
+    allowedAutoPlacements: props.isMobileView ? undefined : [[exports.PLACEMENT.RIGHT, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.RIGHT, exports.PLACEMENT.END].join(CTRL.DASH)]
   }, React__default.createElement(List$1, {
     ref: addFieldListRef,
     itemList: props.fieldList,
@@ -68294,7 +68332,6 @@ var Search = function Search(props) {
     setState = _useState8[1];
   var addFieldComponentRef = React.useRef(null);
   var searchRef = React.useRef(null);
-  var filterContainerRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     return function () {
@@ -68530,8 +68567,7 @@ var Search = function Search(props) {
     });
   };
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$1n['vitro-filter-container'],
-    ref: filterContainerRef
+    className: styles$1n['vitro-filter-container']
   }, React__default.createElement(CriterionFieldIterator, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -68552,7 +68588,6 @@ var Search = function Search(props) {
     fieldList: checkboxFieldList,
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
-    filterContainerRef: filterContainerRef,
     onBlur: onBlurAddFieldDialog,
     isSearch: true
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
@@ -68597,8 +68632,7 @@ var Search = function Search(props) {
     isDismissible: true
   }, content) : React__default.createElement(Overlay$2, {
     isShow: true,
-    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.END,
-    target: searchRef.current || undefined,
+    target: searchRef.current,
     className: styles$1n['vitro-settings-dialog']
   }, content)));
 };