@vitrosoftware/common-ui-ts 1.1.216 → 1.1.217

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

@@ -5,6 +5,9 @@
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+}
+
+.vitro-dialog-content-padding {
     padding: 24px;
 }
 

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

@@ -69,3 +69,9 @@
 .vitro-collapse {
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/field-iterator/img/collapse-up.svg');
 }
+
+.vitro-expand-control-group :global(.vitro-content) {
+    gap: 22px 16px;
+    display: flex;
+    flex-direction: column;
+}

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

@@ -12,20 +12,6 @@
     position: relative;
 }
 
-.vitro-lookup-picker-multi-select .vitro-content {
-    gap: 4px;
-    padding: 8px 16px;
-}
-
-.vitro-lookup-picker-multi-select .vitro-value-container {
-    grid-gap: 4px 12px;
-    flex-wrap: wrap;
-}
-
-.vitro-lookup-picker-multi-select .vitro-right {
-    margin-bottom: auto;
-}
-
 .vitro-read-only .vitro-content {
     color: #4A556C;
     font-size: 12px;
@@ -69,7 +55,8 @@
     display: inline-block;
 }
 
-.vitro-content > .vitro-value-container > input {
+.vitro-content > .vitro-value-container > input,
+.vitro-content .vitro-multi-value-container > input {
     border: none;
     background: transparent;
     flex: 1 1;
@@ -80,15 +67,15 @@
     padding-left: 16px;
 }
 
+.vitro-lookup-picker-multi-select .vitro-content .vitro-multi-value-container > input {
+    padding-left: 0;
+}
+
 .vitro-content > .vitro-value-container {
     min-width: 0;
     flex: 1 1;
 }
 
-.vitro-lookup-picker-multi-select .vitro-content > vitro-value-container. > input {
-    padding-left: 0;
-}
-
 .vitro-button-close,
 .vitro-button-collapse-up,
 .vitro-button-collapse-bottom {
@@ -141,4 +128,35 @@
     width: 24px;
     height: 24px;
     background-size: 20px;
+}
+
+.vitro-lookup-picker-multi-select .vitro-content {
+    padding: 0;
+}
+
+.vitro-lookup-picker-multi-select .vitro-right {
+    position: absolute;
+    top: 8px;
+    right: 16px;
+}
+
+.vitro-multi-value-container {
+    max-height: 96px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 8px 16px;
+}
+
+.vitro-lookup-picker-multi-select:has(.vitro-right) .vitro-multi-value-container {
+    padding: 8px 40px 8px 16px;
+}
+
+.vitro-lookup-picker-multi-select :global(.ps__rail-y) {
+    background-color: transparent !important;
+    border-top: none !important;
+}
+
+.vitro-lookup-picker-multi-select :global(.ps__rail-x) {
+    background-color: transparent !important;
 }

package/css/std/controls/table-view/treegrid-context-menu.css

@@ -163,6 +163,7 @@ vitro-table-view-popup-menu-topMain.TWMenuMainRight::before,
 .vitro-table-view-context-menu-leftMain .TWMenuItem {
     margin: 0 !important;
     padding: 8px 8px 8px 0 !important;
+    position: relative;
 }
 
 .vitro-table-view-context-menuMain .TWMenuItemText,
@@ -190,6 +191,24 @@ vitro-table-view-popup-menu-topMain.TWMenuMainRight::before,
     background-position-x: 12px;
 }
 
+.vitro-table-view-context-menuMain .TWMenuItem.vitro-separator,
+.vitro-table-view-popup-menuMain .TWMenuItem.vitro-separator,
+.vitro-table-view-popup-menu-topMain .TWMenuItem.vitro-separator,
+.vitro-table-view-context-menu-leftMain .TWMenuItem.vitro-separator {
+    border-top: 1px solid #E4E6EC;
+}
+
+.TWMenuItemText.TWMenuvitro-separator::before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #E4E6EC;
+}
+
 @media (max-width: 800px) {
     .vitro-table-view-context-menuMain .TWMenuFocus,
     .vitro-table-view-context-menu-leftMain .TWMenuFocus,

package/dist/index.css

@@ -1446,6 +1446,9 @@ div._component-loader_vitro-component-loader_3J3a2or {
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+}
+
+._dialog-content_vitro-dialog-content-padding_oVEc6Z4 {
     padding: 24px;
 }
 
@@ -3181,7 +3184,12 @@ div._component-loader_vitro-component-loader_3J3a2or {
 ._field-iterator_vitro-collapse_SZoovCi {
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/field-iterator/img/collapse-up.svg');
 }
-
+
+._field-iterator_vitro-expand-control-group_3R-v8Nb .vitro-content {
+    gap: 22px 16px;
+    display: flex;
+    flex-direction: column;
+}
 ._issue-tile_vitro-issue-tile_2D7E9Y- {
     cursor: pointer;
     width: 100%;
@@ -4019,20 +4027,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
     position: relative;
 }
 
-._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-content_37L0slb {
-    gap: 4px;
-    padding: 8px 16px;
-}
-
-._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-value-container_3GeBIaW {
-    grid-gap: 4px 12px;
-    flex-wrap: wrap;
-}
-
-._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-right_1XFsL1w {
-    margin-bottom: auto;
-}
-
 ._lookup-picker_vitro-read-only_32NOdGB ._lookup-picker_vitro-content_37L0slb {
     color: #4A556C;
     font-size: 12px;
@@ -4076,7 +4070,8 @@ div._component-loader_vitro-component-loader_3J3a2or {
     display: inline-block;
 }
 
-._lookup-picker_vitro-content_37L0slb > ._lookup-picker_vitro-value-container_3GeBIaW > input {
+._lookup-picker_vitro-content_37L0slb > ._lookup-picker_vitro-value-container_3GeBIaW > input,
+._lookup-picker_vitro-content_37L0slb ._lookup-picker_vitro-multi-value-container_2ScQ_Ua > input {
     border: none;
     background: transparent;
     flex: 1 1;
@@ -4087,15 +4082,15 @@ div._component-loader_vitro-component-loader_3J3a2or {
     padding-left: 16px;
 }
 
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-content_37L0slb ._lookup-picker_vitro-multi-value-container_2ScQ_Ua > input {
+    padding-left: 0;
+}
+
 ._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 {
-    padding-left: 0;
-}
-
 ._lookup-picker_vitro-button-close_3_Qndrj,
 ._lookup-picker_vitro-button-collapse-up_3i0OJub,
 ._lookup-picker_vitro-button-collapse-bottom_3o0Pl83 {
@@ -4148,6 +4143,37 @@ div._component-loader_vitro-component-loader_3J3a2or {
     width: 24px;
     height: 24px;
     background-size: 20px;
+}
+
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-content_37L0slb {
+    padding: 0;
+}
+
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk ._lookup-picker_vitro-right_1XFsL1w {
+    position: absolute;
+    top: 8px;
+    right: 16px;
+}
+
+._lookup-picker_vitro-multi-value-container_2ScQ_Ua {
+    max-height: 96px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 8px 16px;
+}
+
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk:has(._lookup-picker_vitro-right_1XFsL1w) ._lookup-picker_vitro-multi-value-container_2ScQ_Ua {
+    padding: 8px 40px 8px 16px;
+}
+
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk .ps__rail-y {
+    background-color: transparent !important;
+    border-top: none !important;
+}
+
+._lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk .ps__rail-x {
+    background-color: transparent !important;
 }
 ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
     height: -moz-fit-content;

package/dist/index.js

@@ -516,10 +516,13 @@ var styles$1 = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3H
 
 var CSS_CLASS_SCROLL_Y = 'ps-scroll-y';
 var w = window;
-var ScrollBar = function ScrollBar(props) {
+var ScrollBar = React.forwardRef(function (props, outerRef) {
   var ref = React.useRef(null);
   var scrollElementRef = React.useRef(null);
   var observerRef = React.useRef();
+  React.useImperativeHandle(outerRef, function () {
+    return ref.current;
+  }, []);
   React.useEffect(function () {
     return function () {
       if (observerRef.current) {
@@ -601,12 +604,12 @@ var ScrollBar = function ScrollBar(props) {
   return React__default.createElement("div", {
     ref: ref,
     className: props.className || CTRL.EMPTY
-  }, React__default.createElement("div", {
+  }, React__default.createElement("div", Object.assign({}, props, {
     ref: props.contentRef,
     onWheel: onWheel,
     className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
-  }, props.children));
-};
+  }), props.children));
+});
 
 (function (EVENT) {
   EVENT["MOUSEDOWN"] = "mousedown";
@@ -21478,6 +21481,7 @@ var ATTRIBUTE$1;
   ATTRIBUTE["ADDED"] = "Added";
   ATTRIBUTE["FORMULA"] = "Formula";
   ATTRIBUTE["FORMAT"] = "Format";
+  ATTRIBUTE["SPAN"] = "Span";
 })(ATTRIBUTE$1 || (ATTRIBUTE$1 = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
@@ -21692,6 +21696,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     this.gridChangesFormat = 'JSON';
     this.searchCriterionMap = new Map();
     this.visibleColumnList = [];
+    this.disabledActionList = [];
     this.grid = grid;
     this.id = grid.id;
     this.grid.Source.Upload.Format = this.gridChangesFormat;
@@ -21704,6 +21709,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     } else {
       this.clearSearchCriterionList(searchId);
     }
+    this.grid.searchCriterionList = Array.from(this.searchCriterionMap.values()).flat();
   };
   _proto.setCfgAttribute = function setCfgAttribute(attr, value) {
     var attrList = attr.split(CTRL.DOT);
@@ -22089,7 +22095,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
       var filterContentTypeListJson = JSON.stringify(this.filterContentTypeList);
       newData = this.setXmlPart(newData, "FilterContentTypeList='" + filterContentTypeListJson + "'", XML_TAG.PAGE_SETTINGS);
     }
-    newData = this.setSearchCriterionLisXml(newData);
+    newData = this.setSearchCriterionListXml(newData);
     newData = this.setVisibleColumnListXml(newData);
     return newData;
   };
@@ -22110,7 +22116,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     }
     return xmlString;
   };
-  _proto.setSearchCriterionLisXml = function setSearchCriterionLisXml(data) {
+  _proto.setSearchCriterionListXml = function setSearchCriterionListXml(data) {
     var searchCriterionList = this.getSearchCriterionList();
     if (searchCriterionList && searchCriterionList.length) {
       var searchCriterionListJson = JSON.stringify(searchCriterionList);
@@ -22142,6 +22148,9 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
       }
     }
   };
+  _proto.getNextCol = function getNextCol(col) {
+    return this.grid.GetNextCol(col);
+  };
   _createClass(TableViewServiceImpl, [{
     key: "columnList",
     get: function get() {
@@ -22260,6 +22269,14 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     get: function get() {
       return this.grid.Source;
     }
+  }, {
+    key: "linkItemId",
+    get: function get() {
+      return this.grid.linkItemId;
+    },
+    set: function set(id) {
+      this.grid.linkItemId = id;
+    }
   }]);
   return TableViewServiceImpl;
 }();
@@ -22454,6 +22471,7 @@ var MicroFrontendServiceImpl = /*#__PURE__*/function () {
 
 var styles$6 = {"vitro-micro-frontend":"_micro-frontend_vitro-micro-frontend_3PhlRuX"};
 
+var index = 1;
 var MicroFrontend = React.forwardRef(function (props, ref) {
   var _useState = React.useState(),
     id = _useState[0],
@@ -22468,7 +22486,7 @@ var MicroFrontend = React.forwardRef(function (props, ref) {
       if (props.data.containerId) {
         setId(props.data.containerId);
       } else {
-        var containerId = id ? id : getId(rootRef.current);
+        var containerId = (id ? id : getId(rootRef.current)) + CTRL.DASH + index++;
         setId(containerId);
         props.data.containerId = containerId;
       }
@@ -60191,11 +60209,12 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var styles$e = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$e = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x","vitro-dialog-content-padding":"_dialog-content_vitro-dialog-content-padding_oVEc6Z4"};
 
 var DialogContent = function DialogContent(props) {
+  var className = [styles$e['vitro-dialog-content'], props.isCustomContainer ? CTRL.EMPTY : styles$e['vitro-dialog-content-padding'], props.className || CTRL.EMPTY].join(CTRL.SPACE);
   return React__default.createElement("div", {
-    className: styles$e['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: className
   }, props.children);
 };
 
@@ -60568,7 +60587,8 @@ var Dialog = function Dialog(props) {
     content: props.headerContent,
     className: props.headerClassName
   }), component && React__default.createElement(DialogContent, {
-    className: props.contentClassName
+    className: props.contentClassName,
+    isCustomContainer: props.isCustomContentContainer
   }, component), props.children, isMobileView && props.hiddenContent && React__default.createElement(DialogDetailExpandButton, {
     onClick: onClickDetailButton
   }), props.hiddenContent && React__default.createElement("div", {
@@ -61526,10 +61546,11 @@ var TabGroupComponent = React.forwardRef(function (props, forwardedRef) {
     }
     return null;
   };
+  var isShowHeader = props.itemList.length === 1 ? props.itemList[0].isAlwaysShown === true : true;
   return React__default.createElement("div", {
     className: styles$r['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
-  }, props.itemList.length === 1 && props.isHideSingleHeader === true ? null : React__default.createElement(TabGroupHeader, {
+  }, isShowHeader ? React__default.createElement(TabGroupHeader, {
     itemList: props.itemList.map(function (item, index) {
       return _extends({}, item, {
         index: index
@@ -61540,7 +61561,7 @@ var TabGroupComponent = React.forwardRef(function (props, forwardedRef) {
     changeTab: changeTab,
     wrap: props.wrap,
     isDisabled: props.isDisabled
-  }), React__default.createElement("div", {
+  }) : null, React__default.createElement("div", {
     className: 'vitro-content'
   }, getContent()));
 });
@@ -61643,7 +61664,7 @@ var View = React.forwardRef(function (props, ref) {
     setTabList = _useState[1];
   var createTabList = function createTabList(tabList) {
     return tabList.map(function (tab) {
-      return {
+      return _extends({}, tab, {
         text: tab.text,
         content: {
           component: GroupControl,
@@ -61652,7 +61673,7 @@ var View = React.forwardRef(function (props, ref) {
             componentList: tab.componentList
           }
         }
-      };
+      });
     });
   };
   React.useEffect(function () {
@@ -61666,7 +61687,6 @@ var View = React.forwardRef(function (props, ref) {
     itemList: tabList,
     isDisabled: props.isDisabled,
     className: styles$u['vitro-tab'],
-    isHideSingleHeader: props.isHideSingleTabHeader,
     ref: ref,
     wrap: true
   }));
@@ -63375,7 +63395,7 @@ var ValueTooltip = React.forwardRef(function (props, ref) {
 
 var styles$M = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
-var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA"};
+var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-multi-value-container":"_lookup-picker_vitro-multi-value-container_2ScQ_Ua","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
@@ -63640,6 +63660,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var contentRef = React.useRef(null);
   var containerRef = React.useRef(null);
   var isShowTooltipRef = React.useRef(true);
+  var scrollBarRef = React.useRef(null);
   var updatePending = function updatePending(valueList) {
     return setPending(valueList ? false : true);
   };
@@ -63845,6 +63866,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var _document$activeEleme;
+    if (scrollBarRef.current) {
+      scrollBarRef.current.scrollTop = 0;
+    }
     var target = e.currentTarget;
     var isValueListItem = Boolean(props.isMultiSelect && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.classList.contains(valueListStyles['vitro-item'])));
     if (!target.contains(document.activeElement) && !isValueListItem) {
@@ -63860,6 +63884,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocus = function onFocus(e) {
     var _inputRef$current3;
+    if (scrollBarRef.current) {
+      scrollBarRef.current.scrollTop = scrollBarRef.current.scrollHeight;
+    }
     onInputValueUpdated();
     isShowTooltipRef.current = false;
     setState(styles$N['vitro-focus']);
@@ -63913,6 +63940,22 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       });
     }
   };
+  var content = React__default.createElement(React__default.Fragment, null, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
+    list: selectedValueList,
+    onOptionValueDelete: onOptionValueDelete,
+    selectedValueTemplate: selectedValueTemplate,
+    isMultiSelect: props.isMultiSelect,
+    isReadOnly: props.isReadOnly,
+    isValueListVisible: valueListVisible,
+    getHtmlValue: getHtmlValue
+  }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
+    ref: inputRef,
+    value: inputValue,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    onFocus: onFocus
+  }), !props.isDisabled && props.children);
+  var isShowButtonClear = props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable;
   return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
@@ -63926,28 +63969,18 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   }), React__default.createElement(FlexBox, {
     className: styles$N['vitro-content'],
     ref: contentRef
-  }, React__default.createElement(FlexBox, {
+  }, props.isMultiSelect ? React__default.createElement(ScrollBar, {
+    contentClassName: styles$N['vitro-multi-value-container'],
+    onClick: onFocus,
+    ref: scrollBarRef
+  }, content) : React__default.createElement(FlexBox, {
     className: styles$N['vitro-value-container'],
     onClick: onFocus
-  }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
-    list: selectedValueList,
-    onOptionValueDelete: onOptionValueDelete,
-    selectedValueTemplate: selectedValueTemplate,
-    isMultiSelect: props.isMultiSelect,
-    isReadOnly: props.isReadOnly,
-    isValueListVisible: valueListVisible,
-    getHtmlValue: getHtmlValue
-  }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
-    ref: inputRef,
-    value: inputValue,
-    onKeyDown: onKeyDown,
-    onChange: onChange,
-    onFocus: onFocus
-  }), !props.isDisabled && props.children), React__default.createElement(RightButtonGroup, {
+  }, content), props.isShowSearchButton || props.filterMinLength == 0 || isShowButtonClear || !isEditable ? React__default.createElement(RightButtonGroup, {
     selectedValueList: selectedValueList,
     isReadOnly: props.isReadOnly,
     isEditable: isEditable,
-    isShowButtonClear: props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable,
+    isShowButtonClear: isShowButtonClear,
     isValueListVisible: valueListVisible,
     isShowExpandButton: props.filterMinLength == 0,
     isShowSearchButton: props.isShowSearchButton,
@@ -63955,7 +63988,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onOptionValueDelete: onOptionValueDelete,
     onCollapseButtonClick: onCollapseButtonClick,
     selectedValueTemplate: props.selectedValueTemplate
-  })), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
+  }) : null), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
     inputValue: inputValue,
     list: filteredValueList,
@@ -67026,7 +67059,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.216";
+var version$1 = "1.1.217";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";