@vitrosoftware/common-ui-ts 1.1.104 → 1.1.106

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -24,7 +24,7 @@
 }
 
 .vitro-dropdown-button button::after {
-    display: none;
+    display: none !important;
 }
 
 .vitro-dropdown-icon {
@@ -62,12 +62,9 @@
     padding: 0px;
     font-weight: 400;
     box-sizing: border-box;
-    -webkit-transform: none !important;
-    transform: none !important;
-    position: absolute;
     z-index: 1150;
-    top: calc(100% + 6px) !important;
     right: -4px !important;
+    margin-top: 6px;
 }
 
 .vitro-dropdown-button :global(.dropdown-menu)::before {

package/css/std/controls/file/file.css

@@ -85,8 +85,8 @@
 }
 
 .vitro-dropdown-button :global(.dropdown-menu) {
-    width: 185px;
-    min-width: 185px;
+    width: 184px;
+    min-width: 184px;
 }
 
 .vitro-dropdown-button :global(.btn) > span {

package/css/std/controls/image-viewer/image-viewer.css

@@ -15,7 +15,8 @@
     z-index: 1;
     padding: 20px;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
+    grid-gap: 12px;
 }
 
 .vitro-button-close {

package/css/std/controls/site-select/site-item.css

@@ -28,6 +28,10 @@
     flex-shrink: 0;
 }
 
+.vitro-image{
+    object-fit: contain;
+}
+
 .vitro-default-image {
     background-size: 100%;
     background-repeat: no-repeat;

package/css/std/controls/site-select/site-select.css

@@ -1,7 +1,6 @@
 .vitro-site-select {
     position: relative;
     z-index: 21;
-    margin-left: 32px;
     max-width: 320px;
 }
 
@@ -119,7 +118,6 @@
 @media (max-width: 800px) {
     .vitro-site-select {
         z-index: 0;
-        margin: 0;
         width: 100%;
         max-width: unset;
     }

package/dist/index.css

@@ -1918,7 +1918,7 @@ html, body {
 }
 
 ._dropdown-button_vitro-dropdown-button_1myvkhB button::after {
-    display: none;
+    display: none !important;
 }
 
 ._dropdown-button_vitro-dropdown-icon_2aKCNii {
@@ -1955,11 +1955,9 @@ html, body {
     padding: 0px;
     font-weight: 400;
     box-sizing: border-box;
-    transform: none !important;
-    position: absolute;
     z-index: 1150;
-    top: calc(100% + 6px) !important;
     right: -4px !important;
+    margin-top: 6px;
 }
 
 ._dropdown-button_vitro-dropdown-button_1myvkhB .dropdown-menu::before {
@@ -5640,8 +5638,8 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 }
 
 ._file_vitro-dropdown-button_3MgI2n9 .dropdown-menu {
-    width: 185px;
-    min-width: 185px;
+    width: 184px;
+    min-width: 184px;
 }
 
 ._file_vitro-dropdown-button_3MgI2n9 .btn > span {
@@ -6806,7 +6804,8 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     z-index: 1;
     padding: 20px;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
+    grid-gap: 12px;
 }
 
 ._image-viewer_vitro-button-close_36TY-iY {
@@ -7334,6 +7333,11 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     flex-shrink: 0;
 }
 
+._site-item_vitro-image_3wrW9q4{
+    -o-object-fit: contain;
+       object-fit: contain;
+}
+
 ._site-item_vitro-default-image_fcWWNwv {
     background-size: 100%;
     background-repeat: no-repeat;
@@ -7359,7 +7363,6 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 ._site-select_vitro-site-select_2irDOFZ {
     position: relative;
     z-index: 21;
-    margin-left: 32px;
     max-width: 320px;
 }
 
@@ -7481,7 +7484,6 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 @media (max-width: 800px) {
     ._site-select_vitro-site-select_2irDOFZ {
         z-index: 0;
-        margin: 0;
         width: 100%;
         max-width: unset;
     }

package/dist/index.js

@@ -478,6 +478,7 @@ var ScrollBar = function ScrollBar(props) {
     ref: ref,
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
+    ref: props.contentRef,
     className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
   }, element && props.children));
 };
@@ -60989,13 +60990,30 @@ var styles$n = {"vitro-dropdown-button":"_dropdown-button_vitro-dropdown-button_
 
 var w$4 = window;
 var ALIGN_END = 'end';
+var DROP_DOWN = 'down';
 var POSITION_ABSOLUTE = 'absolute';
 var DropdownButton = function DropdownButton(props) {
+  var _useState = React.useState(props.itemList),
+    itemList = _useState[0],
+    setItemList = _useState[1];
+  var _useState2 = React.useState(true),
+    isReady = _useState2[0],
+    setIsReady = _useState2[1];
+  var buttonRef = React.useRef(null);
   React.useEffect(function () {
     return function () {
       w$4.$('body > .dropdown-menu').remove();
     };
   }, []);
+  React.useEffect(function () {
+    setIsReady(false);
+    setItemList(props.itemList.filter(function (x) {
+      return !x.isOverflow;
+    }));
+  }, [props.itemList]);
+  React.useEffect(function () {
+    setIsReady(true);
+  }, [itemList]);
   var hideMenu = function hideMenu() {
     var button = w$4.$('.vitro-dropdown-button-active');
     if (button.length > 0) {
@@ -61028,13 +61046,13 @@ var DropdownButton = function DropdownButton(props) {
     if (props.onToggle) {
       props.onToggle(state, e);
     }
+    if (!state && buttonRef.current) {
+      buttonRef.current.blur();
+    }
   };
   var overflowItemList = props.itemList.filter(function (x) {
     return x.isOverflow;
   });
-  var dropItemList = props.itemList.filter(function (x) {
-    return !x.isOverflow;
-  });
   var isShowImage = props.itemList.find(function (item) {
     return !!item.imageUrl;
   }) ? true : false;
@@ -61052,18 +61070,21 @@ var DropdownButton = function DropdownButton(props) {
       hoverUrl: item.imageHoverUrl,
       className: styles$n['vitro-image']
     }), React__default.createElement("span", null, item.text));
-  }), dropItemList.length > 0 && React__default.createElement(BootstrapDropdown, {
+  }), itemList.length > 0 && isReady && React__default.createElement(BootstrapDropdown, {
     align: ALIGN_END,
-    onToggle: onDropdownToggle
-  }, React__default.createElement(BootstrapDropdown.Toggle, null, props.title && React__default.createElement("span", {
+    onToggle: onDropdownToggle,
+    drop: DROP_DOWN
+  }, React__default.createElement(BootstrapDropdown.Toggle, {
+    ref: buttonRef
+  }, props.title && React__default.createElement("span", {
     className: styles$n['vitro-title']
   }, props.title), React__default.createElement("span", {
     className: styles$n['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
-    flip: props.flip !== false,
+    flip: props.isFlip !== false,
     style: props.menuStyle || {}
-  }, dropItemList.map(function (x) {
+  }, itemList.map(function (x) {
     return React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
       onClick: function onClick(e) {
@@ -61867,7 +61888,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.104";
+var version$1 = "1.1.106";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -64325,9 +64346,7 @@ var File = function File(props) {
     className: className
   }, props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$$['vitro-dropdown-button'],
-    isIgnoreOverflow: true,
-    flip: false
+    className: styles$$['vitro-dropdown-button']
   }) : null, React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: props.tooltip || CTRL.EMPTY
@@ -64356,7 +64375,7 @@ var AttachedFileListItem = function AttachedFileListItem(props) {
     setHiddenFileList = _useState[1];
   var onHiddenFileListClick = function onHiddenFileListClick(fileList) {
     if (props.showHiddenFileList) {
-      props.showHiddenFileList(fileList);
+      props.showHiddenFileList(fileList, props.fileList);
     } else {
       setHiddenFileList(fileList);
     }
@@ -64474,7 +64493,7 @@ var ActivityMessage = function ActivityMessage(props) {
     }
     return false;
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  return React__default.createElement(React__default.Fragment, null, props.changedValueList.length ? React__default.createElement("div", {
     className: styles$11['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
@@ -64496,7 +64515,7 @@ var ActivityMessage = function ActivityMessage(props) {
       className: item.isMessage ? styles$11['vitro-message'] : styles$11['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
-  })), props.fileList && React__default.createElement(AttachedFileList, Object.assign({
+  })) : null, props.fileList && React__default.createElement(AttachedFileList, Object.assign({
     fileList: props.fileList
   }, props)));
 };
@@ -64576,14 +64595,15 @@ var AttachedFile = function AttachedFile(props) {
 
 var styles$13 = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
 
-var FlexBox = function FlexBox(props) {
+var FlexBox = React.forwardRef(function (props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
+    ref: ref,
     style: props.gap ? {
       gridGap: props.gap + UNIT.PX
     } : {},
     className: styles$13['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }), props.children);
-};
+});
 
 var styles$14 = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ","vitro-display-none":"_message-input_vitro-display-none_2dYTZ22","vitro-attached-file-list":"_message-input_vitro-attached-file-list_l95S4VR","vitro-flex":"_message-input_vitro-flex_18M_7xU"};
 
@@ -64638,9 +64658,6 @@ var MessageInput = function MessageInput(props) {
       inputRef.current.innerText = CTRL.EMPTY;
       setIsShowPlaceholder(true);
     }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = CTRL.EMPTY;
-    }
   };
   var onSelectFile = function onSelectFile(e) {
     var fileArray = e.target.files ? Array.from(e.target.files) : null;
@@ -64651,17 +64668,28 @@ var MessageInput = function MessageInput(props) {
         props.onSelectFiles(fileArray);
       }
     }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = CTRL.EMPTY;
+    }
   };
-  var onPasteImage = function onPasteImage(e) {
+  var onPaste = function onPaste(e) {
     if (e.clipboardData) {
-      var fileArray = Array.from(e.clipboardData.files);
-      if (fileArray.length) {
-        var list = [].concat(fileList, fileArray);
-        setFileList(list);
+      var _fileList = e.clipboardData.files;
+      if (_fileList && _fileList.length) {
         e.preventDefault();
-        if (props.onPasteImage) {
-          props.onPasteImage(fileArray);
-        }
+        processFileList(_fileList);
+      }
+    }
+  };
+  var processFileList = function processFileList(list) {
+    var fileArray = Array.from(list).filter(function (file) {
+      return file.type;
+    });
+    if (fileArray.length) {
+      var _list = [].concat(fileList, fileArray);
+      setFileList(_list);
+      if (props.onPasteFile) {
+        props.onPasteFile(fileArray);
       }
     }
   };
@@ -64675,6 +64703,13 @@ var MessageInput = function MessageInput(props) {
     newFileList.splice(index, 1);
     setFileList(newFileList);
   };
+  var onDrop = function onDrop(e) {
+    var fileList = e.dataTransfer.files;
+    if (fileList) {
+      e.preventDefault();
+      processFileList(fileList);
+    }
+  };
   return React__default.createElement("div", {
     className: styles$14['vitro-message-input'],
     onDrop: props.onDrop
@@ -64701,7 +64736,8 @@ var MessageInput = function MessageInput(props) {
     onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
-    onPaste: onPasteImage,
+    onPaste: onPaste,
+    onDrop: onDrop,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
     className: styles$14['vitro-placeholder']
@@ -66032,7 +66068,8 @@ var ScrollView = function ScrollView(props) {
       navigatable: true,
       contentHeight: CONTENT_HEIGHT + CTRL.PERCENT,
       enablePager: props.isEnablePager,
-      change: onChange
+      change: onChange,
+      page: props.activePage || 0
     });
   };
   var destroy = function destroy() {
@@ -66048,8 +66085,9 @@ var ScrollView = function ScrollView(props) {
   };
   return React__default.createElement("div", {
     ref: scrollViewRef,
-    className: styles$1c['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
-  }, props.itemList.map(function (item, index) {
+    className: styles$1c['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY),
+    tabIndex: 0
+  }, props.itemList.map(function (item) {
     return React__default.createElement(item.component, item.props);
   }));
 };
@@ -66093,9 +66131,9 @@ var ImageViewer = React.forwardRef(function (props, ref) {
   });
   React.useEffect(function () {
     init();
-    window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    window.addEventListener(exports.EVENT.KEYDOWN, onEscClick);
     return function () {
-      window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+      window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick);
     };
   }, []);
   var init = function init() {
@@ -66128,17 +66166,18 @@ var ImageViewer = React.forwardRef(function (props, ref) {
     className: styles$1e['vitro-image-viewer']
   }, React__default.createElement("div", {
     className: styles$1e['vitro-header']
-  }, React__default.createElement("button", {
-    className: styles$1e['vitro-button-close'],
-    onClick: props.onCloseClick
-  }), actionList.length ? React__default.createElement(DropdownButton, {
+  }, actionList.length ? React__default.createElement(DropdownButton, {
     itemList: actionList,
     className: styles$1e['vitro-dropdown-button']
-  }) : null), React__default.createElement(ScrollView, {
+  }) : null, React__default.createElement("button", {
+    className: styles$1e['vitro-button-close'],
+    onClick: props.onCloseClick
+  })), React__default.createElement(ScrollView, {
     itemList: itemList,
     onChange: onChange,
     className: styles$1e['vitro-scroll-view'],
-    isEnablePager: true
+    isEnablePager: true,
+    activePage: props.activePage
   })) : null);
 });
 
@@ -66710,6 +66749,7 @@ var SiteSelect = function SiteSelect(props) {
     isMobileView = _useState3[0],
     setIsMobileView = _useState3[1];
   var listRef = React.useRef(null);
+  var flexBoxRef = React.useRef(null);
   React.useEffect(function () {
     setVisibleItemList(function (prevState) {
       return props.itemList.filter(function (item) {
@@ -66781,7 +66821,9 @@ var SiteSelect = function SiteSelect(props) {
     setIsExpanded(!isExpanded);
   };
   var onMouseDown = function onMouseDown(e) {
-    if (!isMobileView && listRef.current && !listRef.current.contains(e.target)) {
+    var list = listRef.current;
+    var flexBox = flexBoxRef.current;
+    if (!isMobileView && list && !list.contains(e.target) && flexBox && !flexBox.contains(e.target)) {
       setIsExpanded(false);
     }
   };
@@ -66805,7 +66847,8 @@ var SiteSelect = function SiteSelect(props) {
   return React__default.createElement("div", {
     className: styles$1v['vitro-site-select']
   }, React__default.createElement(FlexBox, {
-    className: 'vitro-flex'
+    className: styles$1v['vitro-flex'],
+    ref: flexBoxRef
   }, React__default.createElement("h2", {
     onClick: onClick
   }, props.activeItem.name), React__default.createElement(ImageButton, {