@vitrosoftware/common-ui-ts 1.1.30 → 1.1.32

package/css/std/controls/alert/alert.css

@@ -43,6 +43,7 @@
 .vitro-icon {
     width: 24px;
     height: 24px;
+    min-width: 24px;
     margin-right: 8px;
     background-position: center;
     background-size: 100%;
@@ -57,6 +58,7 @@
     line-height: 21px;
     color: #4A556C;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .vitro-text > strong {

package/css/std/controls/button/button.css

@@ -22,6 +22,13 @@
     align-items: center;
     justify-content: center;
     flex: 1 1;
+    overflow: hidden;
+}
+
+.vitro-button div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .vitro-button:hover, 
@@ -33,8 +40,9 @@
     background: #E4E6EC;
 }
 
-.vitro-button :global(.vitro-icon-default), 
-.vitro-button :global(.vitro-icon-hover) {
+.vitro-button :global(.vitro-icon-default),
+.vitro-button :global(.vitro-icon-hover),
+.vitro-button :global(.vitro-icon) {
     margin-right: 4px;
     height: 24px;
     width: 24px;

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

@@ -31,9 +31,12 @@
     border-radius: 0 0 4px 4px;
 }
 
-.vitro-value-list .vitro-item:first-child {
+.vitro-value-list .vitro-item:nth-child(2) {
     border-radius: 4px 4px 0 0;
-    padding: 0 !important;
+}
+
+.vitro-value-list .vitro-item:last-child:nth-child(2) {
+    border-radius: 4px;
 }
 
 .vitro-value-list .vitro-item > .vitro-item-html-value {

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

@@ -542,8 +542,10 @@ div.TWMenuItemText {
 }
 
 .TWNoDataRow {
+    padding: 2px 0 !important;
     background: #fff;
     border: none !important;
+    border-bottom: 1px solid var(--grey-grey-sh-50, rgba(228, 230, 236, 0.50)) !important;
 }
 
 .TWNoDataRow .TWSpaceWidthInner {
@@ -605,10 +607,13 @@ div.TWMenuItemText {
     color: #BDBDBD;
 }
 
-.TWCell .vitro-flex > div {
+.TWCell .vitro-flex > div,
+.TWCell .vitro-flex > .vitro-icon {
     margin-right: 4px;
     font-size: 12px;
     line-height: 24px;
+    width: 24px;
+    height: 24px;
 }
 
 .TWRowAbove {

package/css/std/controls/view/view.css

@@ -3,3 +3,8 @@
     padding: 16px;
     overflow: hidden;
 }
+
+.vitro-view-part {
+    width: 100%;
+    flex-grow: 1;
+}

package/dist/controls/ViewPart/ViewPart.d.ts

@@ -4,6 +4,7 @@ interface ViewPartProps {
     settings: any;
     props: any;
     item?: any;
+    className?: string;
 }
 export declare let ViewPart: (props: ViewPartProps) => JSX.Element;
 export {};

package/dist/index.css

@@ -1024,6 +1024,13 @@
     align-items: center;
     justify-content: center;
     flex: 1 1;
+    overflow: hidden;
+}
+
+._button_vitro-button_hVfBuSO div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 ._button_vitro-button_hVfBuSO:hover, 
@@ -1035,8 +1042,9 @@
     background: #E4E6EC;
 }
 
-._button_vitro-button_hVfBuSO .vitro-icon-default, 
-._button_vitro-button_hVfBuSO .vitro-icon-hover {
+._button_vitro-button_hVfBuSO .vitro-icon-default,
+._button_vitro-button_hVfBuSO .vitro-icon-hover,
+._button_vitro-button_hVfBuSO .vitro-icon {
     margin-right: 4px;
     height: 24px;
     width: 24px;
@@ -1438,12 +1446,6 @@
     flex-grow: 1;
     max-height: 100%;
 }
-._view_vitro-view_1NKb-kU {
-    flex: 1 1;
-    padding: 16px;
-    overflow: hidden;
-}
-
 ._dropdown-button_vitro-dropdown-button_1myvkhB {
     display: flex;
     align-items: center;
@@ -1733,6 +1735,17 @@
     width: 136px;
 }
 
+._view_vitro-view_1NKb-kU {
+    flex: 1 1;
+    padding: 16px;
+    overflow: hidden;
+}
+
+._view_vitro-view-part_X1Zzk97 {
+    width: 100%;
+    flex-grow: 1;
+}
+
 ._label_vitro-label_it8WNUE {
     font-size: inherit;
     margin-left: 0;
@@ -3054,9 +3067,12 @@
     border-radius: 0 0 4px 4px;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:first-child {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:nth-child(2) {
     border-radius: 4px 4px 0 0;
-    padding: 0 !important;
+}
+
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:last-child:nth-child(2) {
+    border-radius: 4px;
 }
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u > ._lookup-picker-value-list_vitro-item-html-value_1yl9tXx {
@@ -3896,6 +3912,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._alert_vitro-icon_pK385gF {
     width: 24px;
     height: 24px;
+    min-width: 24px;
     margin-right: 8px;
     background-position: center;
     background-size: 100%;
@@ -3910,6 +3927,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     line-height: 21px;
     color: #4A556C;
     flex-direction: column;
+    overflow: hidden;
 }
 
 ._alert_vitro-text_37Erxqj > strong {

package/dist/index.js

@@ -60202,13 +60202,11 @@ var ViewPart = function ViewPart(props) {
     }
   }, [props.component, props.settings, props.item]);
   return React__default.createElement("div", {
-    className: styles$9["vitro-view-part"]
+    className: styles$9['vitro-view-part'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, component);
 };
 
-var styles$a = {"vitro-view":"_view_vitro-view_1NKb-kU"};
-
-var styles$b = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-icon":"_dropdown-button_vitro-icon_2NCEoeb","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
+var styles$a = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_1myvkhB","vitro-dropdown-icon":"_dropdown-button_vitro-dropdown-icon_2aKCNii","vitro-text":"_dropdown-button_vitro-text_1FRiwp0","vitro-dropdown-button-item-overflow":"_dropdown-button_vitro-dropdown-button-item-overflow_2aWEhD4","vitro-icon":"_dropdown-button_vitro-icon_2NCEoeb","dropdown-item":"_dropdown-button_dropdown-item_1c2DhhE"};
 
 var w$4 = window;
 var ALIGN_END = 'end';
@@ -60262,10 +60260,10 @@ var DropdownButton = function DropdownButton(props) {
     return !!item.imageUrl;
   }) ? true : false;
   return React__default.createElement("div", {
-    className: styles$b['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
+    className: styles$a['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
   }, overflowItemList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$b['vitro-dropdown-button-item-overflow'],
+      className: styles$a['vitro-dropdown-button-item-overflow'],
       key: item.key,
       onClick: function onClick(e) {
         return item.onClick(item.value, e);
@@ -60273,15 +60271,15 @@ var DropdownButton = function DropdownButton(props) {
     }, item.imageUrl && React__default.createElement(Icon, {
       defaultUrl: item.imageUrl,
       hoverUrl: item.imageHoverUrl,
-      className: styles$b['vitro-icon']
+      className: styles$a['vitro-icon']
     }), React__default.createElement("span", null, item.text));
   }), dropItemList.length > 0 && React__default.createElement(BootstrapDropdown, {
     align: ALIGN_END,
     onToggle: onDropdownToggle
   }, React__default.createElement(BootstrapDropdown.Toggle, null, props.title && React__default.createElement("span", {
-    className: styles$b['vitro-title']
+    className: styles$a['vitro-title']
   }, props.title), React__default.createElement("span", {
-    className: styles$b['vitro-dropdown-icon']
+    className: styles$a['vitro-dropdown-icon']
   }, props.title)), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
     flip: false
@@ -60295,7 +60293,7 @@ var DropdownButton = function DropdownButton(props) {
       item: x,
       isConfirm: true
     }, React__default.createElement("a", {
-      className: styles$b['dropdown-item'],
+      className: styles$a['dropdown-item'],
       role: 'button'
     }, x.text)) : React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
@@ -60304,7 +60302,7 @@ var DropdownButton = function DropdownButton(props) {
         return x.onClick(x.value, e);
       }
     }, isShowImage && React__default.createElement("div", {
-      className: styles$b['vitro-icon']
+      className: styles$a['vitro-icon']
     }, x.imageUrl && React__default.createElement(Icon, {
       defaultUrl: x.imageUrl,
       hoverUrl: x.imageHoverUrl
@@ -60312,12 +60310,12 @@ var DropdownButton = function DropdownButton(props) {
   }))));
 };
 
-var styles$c = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
+var styles$b = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2","vitro-dropdown-button":"_tab-group_vitro-dropdown-button_146jv_h"};
 
 var OverflowButton = function OverflowButton(props) {
   if (!props.list || !props.list.length) return null;
   return React__default.createElement(DropdownButton, {
-    className: styles$c['vitro-dropdown-button'],
+    className: styles$b['vitro-dropdown-button'],
     itemList: props.list.map(function (x, i) {
       return _extends({}, x, {
         value: props.offset + i,
@@ -60333,9 +60331,9 @@ var OverflowButton = function OverflowButton(props) {
 var Tab = function Tab(props) {
   return React__default.createElement("div", {
     key: props.index,
-    className: styles$c['vitro-item']
+    className: styles$b['vitro-item']
   }, React__default.createElement(Nav$2.Item, {
-    className: props.active ? styles$c['active'] : undefined,
+    className: props.active ? styles$b['active'] : undefined,
     onClick: function onClick() {
       return props.onClick(props.index);
     }
@@ -60413,7 +60411,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     }
   }, [currentTab, props.itemList]);
   return React__default.createElement("div", {
-    className: styles$c['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$b['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
     itemList: props.itemList,
@@ -60451,21 +60449,23 @@ var TabGroup = function TabGroup(props) {
   }, React__default.createElement(TabGroupComponent, Object.assign({}, props))) : React__default.createElement(TabGroupComponent, Object.assign({}, props));
 };
 
-var styles$d = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
+var styles$c = {"vitro-control":"_control-group_vitro-control_2h_sXQv","vitro-control-row":"_control-group_vitro-control-row_6l8m5Wh","vitro-label":"_control-group_vitro-label_3J193Ml"};
 
 var ControlGroup = function ControlGroup(props) {
   if (props.horizontal) {
     return React__default.createElement("div", {
-      className: 'container ' + styles$d['vitro-control']
+      className: 'container ' + styles$c['vitro-control']
     }, React__default.createElement("div", {
       className: props.as
     }, props.children));
   }
   return React__default.createElement("div", {
-    className: styles$d['vitro-control-row']
+    className: styles$c['vitro-control-row']
   }, props.children);
 };
 
+var styles$d = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-view-part":"_view_vitro-view-part_X1Zzk97"};
+
 var View = function View(props) {
   var _useState = React.useState([]),
     tabList = _useState[0],
@@ -60490,7 +60490,7 @@ var View = function View(props) {
     }
   }, [props.tabList]);
   return tabList && React__default.createElement("div", {
-    className: styles$a["vitro-view"]
+    className: styles$d["vitro-view"]
   }, React__default.createElement(TabGroup, {
     itemList: tabList,
     wrap: true
@@ -60499,7 +60499,15 @@ var View = function View(props) {
 var GetGroupControl = function GetGroupControl(props) {
   return React__default.createElement(ControlGroup, {
     horizontal: true
-  }, props.componentList.map(function (viewPart) {
+  }, props.componentList.length > 1 ? React__default.createElement(ScrollBar, null, props.componentList.map(function (viewPart) {
+    return React__default.createElement(ViewPart, {
+      component: viewPart.component,
+      settings: viewPart.settings,
+      props: props,
+      item: props.item,
+      className: styles$d['vitro-view-part']
+    });
+  })) : props.componentList.map(function (viewPart) {
     return React__default.createElement(ViewPart, {
       component: viewPart.component,
       settings: viewPart.settings,
@@ -61437,7 +61445,7 @@ var SelectedValueList = function SelectedValueList(props) {
       key: x.id,
       className: styles$o['vitro-selected-item'],
       title: title
-    }, props.getHtmlValue ? React__default.createElement("div", {
+    }, props.getHtmlValue && props.getHtmlValue(x) ? React__default.createElement("div", {
       className: htmlValueStyles['vitro-item-html-value']
     }, props.getHtmlValue(x)) : null, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
       onClick: function onClick() {