@vitrosoftware/common-ui-ts 1.1.104 → 1.1.105

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/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 {

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.105";
 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)));
 };
@@ -64638,9 +64657,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 +64667,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 +64702,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 +64735,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 +66067,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 +66084,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 +66130,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 +66165,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);
 });