@vitrosoftware/common-ui-ts 1.1.187 → 1.1.189

package/css/std/controls/add-field-button/list.css

@@ -1,15 +1,24 @@
 .vitro-list {
     background: #fff;
     border-radius: 4px;
+    max-width: 372px;
+}
+
+:global(.vitro-views-dialog.vitro-views-dialog-mobile) .vitro-list,
+:global([class^="_search_vitro-search-mobile"]) .vitro-list {
     max-width: 252px;
 }
 
 .vitro-list :global(.ps) > div:first-child {
-    padding-left: 12px;
+    padding-left: 0;
 }
 
 .vitro-item {
-    margin-bottom: 4px;
+    padding: 2px 15px 2px 12px;
+}
+
+.vitro-item:hover {
+    background: #F3F8FF;
 }
 
 .vitro-item:last-child {
@@ -21,4 +30,68 @@
     display: block;
     line-height: 24px;
     padding: 0 4px 0 4px;
+    color: #222d44;
+}
+
+:global(.vitro-views-dialog:not(.vitro-views-dialog-mobile)) .vitro-item a,
+:global([class^="_search_vitro-filter-container"]) .vitro-item a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+:global([class^="_search_vitro-search-mobile_"]) :global([class^="_search_vitro-filter-container"]) .vitro-item a {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+}
+
+:global(.vitro-list-item-tooltip) {
+    padding: 0;
+    pointer-events: none;
+    height: 28px;
+}
+
+:global(.vitro-list-item-tooltip) :global(.tooltip-arrow) {
+    display: none;
+}
+
+:global(.vitro-list-item-tooltip) :global(.tooltip-inner) {
+    max-width: none;
+    background: #ffffff;
+    pointer-events: none;
+    color: inherit;
+    padding: 3px 16px 3px 15px;
+    background: #F3F8FF;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@media (min-width: 1201px) {
+    :global(.vitro-list-item-tooltip) {
+        max-width: calc(50% + 109px);
+    }
+}
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+    :global(.vitro-list-item-tooltip) {
+        max-width: calc(100% - 490px);
+    }
+}
+
+@media (min-width: 821px) and (max-width: 1024px) {
+    :global(.vitro-list-item-tooltip) {
+        max-width: calc(100% - 440px);
+    }
+}
+
+@media (min-width: 800px) and (max-width: 821px) {
+    :global(.vitro-list-item-tooltip) {
+        max-width: calc(100% - 430px);
+    }
+}
+
+:global(.vitro-list-item-tooltip.vitro-search-list-item-tooltip) {
+    max-width: 382px;
 }

package/css/std/controls/criterion/criterion.css

@@ -247,4 +247,8 @@
     bottom: 40px;
     right: 0;
     margin: 0;
+}
+
+.vitro-criterion-container-mobile .vitro-label {
+    max-width: calc(100% - 96px);
 }

package/css/std/controls/criterion-field-iterator/criterion-field-iterator.css

@@ -33,5 +33,5 @@
 
 .vitro-add-field-dialog :global(.ps) > div:first-child {
     max-height: 204px;
-    max-width: 242px;
+    max-width: 372px;
 }

package/css/std/controls/search/search.css

@@ -57,6 +57,10 @@
     max-width: calc(100% - 87px);
 }
 
+.vitro-search-mobile .vitro-filter [class^="_criterion_vitro-control"] {
+    max-width: none;
+}
+
 .vitro-add-field {
     margin: 18px 0 16px 66px;
 }
@@ -88,7 +92,13 @@
 
 .vitro-add-field-dialog :global(.ps) > div:first-child {
     max-height: 204px;
-    max-width: 242px;
+    max-width: 372px;
+}
+
+@media (max-width: 799px) {
+    .vitro-add-field-dialog :global(.ps) > div:first-child {
+        max-width: 242px !important;
+    }
 }
 
 .vitro-button-group {
@@ -192,10 +202,6 @@
     padding-top: 0;
 }
 
-.vitro-settings-dialog-mobile .vitro-filter-container :global(.ps) > div > div {
-    padding: 0;
-}
-
 .vitro-settings-dialog-mobile .vitro-scrollbar > div > div > :global(.vitro-block):first-child > div > div {
     margin: 0;
 }

package/dist/index.css

@@ -6777,6 +6777,10 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     bottom: 40px;
     right: 0;
     margin: 0;
+}
+
+._criterion_vitro-criterion-container-mobile_1yxaJHi ._criterion_vitro-label_3F6a8dj {
+    max-width: calc(100% - 96px);
 }
 ._item_vitro-criterion-container_3cAvpK0 {
     width: 100%;
@@ -6872,7 +6876,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 
 ._criterion-field-iterator_vitro-add-field-dialog_3QlfaQE .ps > div:first-child {
     max-height: 204px;
-    max-width: 242px;
+    max-width: 372px;
 }
 ._search-input_vitro-search-input_3M9i4Gi {
     height: 32px;
@@ -6991,15 +6995,24 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 ._list_vitro-list_1I2JJ6w {
     background: #fff;
     border-radius: 4px;
+    max-width: 372px;
+}
+
+.vitro-views-dialog.vitro-views-dialog-mobile ._list_vitro-list_1I2JJ6w,
+[class^="_search_vitro-search-mobile"] ._list_vitro-list_1I2JJ6w {
     max-width: 252px;
 }
 
 ._list_vitro-list_1I2JJ6w .ps > div:first-child {
-    padding-left: 12px;
+    padding-left: 0;
 }
 
 ._list_vitro-item_2XsFSic {
-    margin-bottom: 4px;
+    padding: 2px 15px 2px 12px;
+}
+
+._list_vitro-item_2XsFSic:hover {
+    background: #F3F8FF;
 }
 
 ._list_vitro-item_2XsFSic:last-child {
@@ -7011,6 +7024,70 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     display: block;
     line-height: 24px;
     padding: 0 4px 0 4px;
+    color: #222d44;
+}
+
+.vitro-views-dialog:not(.vitro-views-dialog-mobile) ._list_vitro-item_2XsFSic a,
+[class^="_search_vitro-filter-container"] ._list_vitro-item_2XsFSic a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+[class^="_search_vitro-search-mobile_"] [class^="_search_vitro-filter-container"] ._list_vitro-item_2XsFSic a {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+}
+
+.vitro-list-item-tooltip {
+    padding: 0;
+    pointer-events: none;
+    height: 28px;
+}
+
+.vitro-list-item-tooltip .tooltip-arrow {
+    display: none;
+}
+
+.vitro-list-item-tooltip .tooltip-inner {
+    max-width: none;
+    background: #ffffff;
+    pointer-events: none;
+    color: inherit;
+    padding: 3px 16px 3px 15px;
+    background: #F3F8FF;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@media (min-width: 1201px) {
+    .vitro-list-item-tooltip {
+        max-width: calc(50% + 109px);
+    }
+}
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+    .vitro-list-item-tooltip {
+        max-width: calc(100% - 490px);
+    }
+}
+
+@media (min-width: 821px) and (max-width: 1024px) {
+    .vitro-list-item-tooltip {
+        max-width: calc(100% - 440px);
+    }
+}
+
+@media (min-width: 800px) and (max-width: 821px) {
+    .vitro-list-item-tooltip {
+        max-width: calc(100% - 430px);
+    }
+}
+
+.vitro-list-item-tooltip.vitro-search-list-item-tooltip {
+    max-width: 382px;
 }
 
 ._search_vitro-search_QkJksC_ {
@@ -7072,6 +7149,10 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     max-width: calc(100% - 87px);
 }
 
+._search_vitro-search-mobile_XsKRflV ._search_vitro-filter_2n-Y-mS [class^="_criterion_vitro-control"] {
+    max-width: none;
+}
+
 ._search_vitro-add-field_2hHt1Z2 {
     margin: 18px 0 16px 66px;
 }
@@ -7103,7 +7184,13 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 
 ._search_vitro-add-field-dialog_3gC92SF .ps > div:first-child {
     max-height: 204px;
-    max-width: 242px;
+    max-width: 372px;
+}
+
+@media (max-width: 799px) {
+    ._search_vitro-add-field-dialog_3gC92SF .ps > div:first-child {
+        max-width: 242px !important;
+    }
 }
 
 ._search_vitro-button-group_1VuZJdq {
@@ -7207,10 +7294,6 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     padding-top: 0;
 }
 
-._search_vitro-settings-dialog-mobile_1no71m6 ._search_vitro-filter-container_3p6D0hI .ps > div > div {
-    padding: 0;
-}
-
 ._search_vitro-settings-dialog-mobile_1no71m6 ._search_vitro-scrollbar_3Xg3VXI > div > div > .vitro-block:first-child > div > div {
     margin: 0;
 }

package/dist/index.js

@@ -60933,6 +60933,7 @@ var Tooltip$1 = function Tooltip(props) {
     show: props.isShow,
     flip: props.isFlip,
     trigger: TRIGGER.HOVER,
+    popperConfig: props.popperConfig || {},
     overlay: React__default.createElement(TooltipComponent, {
       className: styles$c['vitro-tooltip'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
       style: props.style
@@ -63078,7 +63079,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.187";
+var version$1 = "1.1.189";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -68060,7 +68061,10 @@ var SearchValueList = function SearchValueList(props) {
     className: props.inputClassName,
     isMobileView: Boolean(props.isMobileView)
   })), React__default.createElement(ScrollBar, null, props.children, itemList && itemList.length ? itemList.map(function (item) {
-    return props.valueTemplate(item);
+    var _props$isItemOverflow, _props$isItemOverflow2;
+    return props.valueTemplate(item, (_props$isItemOverflow = props.isItemOverflowList) === null || _props$isItemOverflow === void 0 ? void 0 : (_props$isItemOverflow2 = _props$isItemOverflow.find(function (x) {
+      return x.id === item.id;
+    })) === null || _props$isItemOverflow2 === void 0 ? void 0 : _props$isItemOverflow2.isShow);
   }) : React__default.createElement("span", {
     className: styles$1l['vitro-empty-placeholder']
   }, props.emptyPlaceHolder || localeService.create(LOCALE$9.EMPTY_PLACEHOLDER))));
@@ -68068,16 +68072,103 @@ var SearchValueList = function SearchValueList(props) {
 
 var styles$1m = {"vitro-list":"_list_vitro-list_1I2JJ6w","vitro-item":"_list_vitro-item_2XsFSic"};
 
+var CSS_CLASS_ITEM_TOOLTIP = 'vitro-list-item-tooltip';
+var CSS_CLASS_SEARCH_ITEM_TOOLTIP = 'vitro-search-list-item-tooltip';
+var CSS_CLASS_ITEM = 'vitro-item';
+var CSS_CLASS_LIST = 'vitro-list';
+var CSS_CLASS_SEARCH_VALUE_LIST = 'vitro-search-value-list';
+var OFFSET = 'offset';
 var List$1 = React.forwardRef(function (props, ref) {
+  var _useState = React.useState([]),
+    isItemOverflowList = _useState[0],
+    setIsItemOverflowList = _useState[1];
+  var itemRef = React.useRef([]);
+  React.useEffect(function () {
+    var _props$itemList;
+    if ((_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length) {
+      var _isItemOverflowList = [];
+      props.itemList.forEach(function (item) {
+        _isItemOverflowList.push({
+          id: item.id,
+          isShow: false
+        });
+      });
+      setIsItemOverflowList(_isItemOverflowList);
+    }
+  }, []);
   var _onClick = function onClick(id) {
     if (props.onClick) {
       props.onClick(id);
     }
   };
-  var getItemTemplate = function getItemTemplate(item) {
+  var popperConfig = {
+    modifiers: [{
+      name: OFFSET,
+      options: {
+        offset: function offset(offsetProps) {
+          var _offsetProps$referenc, _offsetProps$referenc2;
+          var offsetX = offsetProps !== null && offsetProps !== void 0 && (_offsetProps$referenc = offsetProps.reference) !== null && _offsetProps$referenc !== void 0 && _offsetProps$referenc.width ? -1 * (offsetProps === null || offsetProps === void 0 ? void 0 : (_offsetProps$referenc2 = offsetProps.reference) === null || _offsetProps$referenc2 === void 0 ? void 0 : _offsetProps$referenc2.width) : 0;
+          return [0, offsetX];
+        }
+      }
+    }]
+  };
+  var isTextOverflow = function isTextOverflow(elm) {
+    if (elm) {
+      return elm.offsetWidth < elm.scrollWidth;
+    }
+    return false;
+  };
+  var onItemHover = function onItemHover(itemId) {
+    var item = isItemOverflowList.find(function (x) {
+      return x.id === itemId;
+    });
+    var isShow = itemRef.current[itemId] ? isTextOverflow(itemRef.current[itemId]) : false;
+    if (item && item.isShow !== isShow) {
+      setIsItemOverflowList(isItemOverflowList.map(function (x) {
+        if (x.id === itemId) {
+          return _extends({}, x, {
+            isShow: isShow
+          });
+        } else {
+          return x;
+        }
+      }));
+    } else {
+      isItemOverflowList.push({
+        id: itemId,
+        isShow: isShow
+      });
+    }
+  };
+  var getItemTemplate = function getItemTemplate(item, isShow) {
+    return React__default.createElement(Tooltip$1, {
+      placement: PLACEMENT.RIGHT,
+      text: item.name,
+      popperConfig: popperConfig,
+      className: CSS_CLASS_ITEM_TOOLTIP + (props.isSearch ? CTRL.SPACE + CSS_CLASS_SEARCH_ITEM_TOOLTIP : CTRL.EMPTY),
+      isShow: isShow ? undefined : false
+    }, React__default.createElement("div", {
+      className: styles$1m[CSS_CLASS_ITEM]
+    }, React__default.createElement("a", {
+      ref: function ref(element) {
+        return itemRef.current[item.id] = element;
+      },
+      onClick: function onClick() {
+        return _onClick(item.id);
+      },
+      onMouseOver: function onMouseOver() {
+        return onItemHover(item.id);
+      }
+    }, item.name)));
+  };
+  var getItemTemplateMobile = function getItemTemplateMobile(item) {
     return React__default.createElement("div", {
-      className: styles$1m['vitro-item']
+      className: styles$1m[CSS_CLASS_ITEM]
     }, React__default.createElement("a", {
+      ref: function ref(element) {
+        return itemRef.current[item.id] = element;
+      },
       onClick: function onClick() {
         return _onClick(item.id);
       }
@@ -68087,17 +68178,18 @@ var List$1 = React.forwardRef(function (props, ref) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$1m['vitro-list'],
+    className: styles$1m[CSS_CLASS_LIST],
     ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
-    valueTemplate: getItemTemplate,
+    valueTemplate: props.isMobileView ? getItemTemplateMobile : getItemTemplate,
     filterValueTemplate: filterValueTemplate,
-    className: styles$1m['vitro-search-value-list']
+    className: styles$1m[CSS_CLASS_SEARCH_VALUE_LIST],
+    isItemOverflowList: isItemOverflowList
   }));
 });
 
-var styles$1n = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter-container":"_search_vitro-filter-container_3p6D0hI","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-field-iterator":"_search_vitro-field-iterator_2xhcd1b","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-button-group":"_search_vitro-button-group_1VuZJdq","vitro-button":"_search_vitro-button_1kaitIg","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM","vitro-button-settings":"_search_vitro-button-settings_oJCn__t","vitro-search-mobile":"_search_vitro-search-mobile_XsKRflV","vitro-settings-dialog-mobile":"_search_vitro-settings-dialog-mobile_1no71m6","vitro-settings-dialog-header":"_search_vitro-settings-dialog-header_vID4BE6","vitro-settings-dialog-footer":"_search_vitro-settings-dialog-footer_11fP4FC","vitro-scrollbar":"_search_vitro-scrollbar_3Xg3VXI"};
+var styles$1n = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter-container":"_search_vitro-filter-container_3p6D0hI","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-field-iterator":"_search_vitro-field-iterator_2xhcd1b","vitro-search-mobile":"_search_vitro-search-mobile_XsKRflV","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-button-group":"_search_vitro-button-group_1VuZJdq","vitro-button":"_search_vitro-button_1kaitIg","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM","vitro-button-settings":"_search_vitro-button-settings_oJCn__t","vitro-settings-dialog-mobile":"_search_vitro-settings-dialog-mobile_1no71m6","vitro-settings-dialog-header":"_search_vitro-settings-dialog-header_vID4BE6","vitro-settings-dialog-footer":"_search_vitro-settings-dialog-footer_11fP4FC","vitro-scrollbar":"_search_vitro-scrollbar_3Xg3VXI"};
 
 var AddFieldButton = React.forwardRef(function (props, ref) {
   var _props$filterContaine;
@@ -68147,7 +68239,9 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
   }, React__default.createElement(List$1, {
     ref: addFieldListRef,
     itemList: props.fieldList,
-    onClick: onFieldListChange
+    onClick: onFieldListChange,
+    isMobileView: props.isMobileView,
+    isSearch: props.isSearch
   })));
 });
 
@@ -68438,7 +68532,8 @@ var Search = function Search(props) {
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
     filterContainerRef: filterContainerRef,
-    onBlur: onBlurAddFieldDialog
+    onBlur: onBlurAddFieldDialog,
+    isSearch: true
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
     className: styles$1n['vitro-button-group']
   }, React__default.createElement(Button$2, {