@vitrosoftware/common-ui-ts 1.1.41 → 1.1.43

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

@@ -57,7 +57,7 @@
 }
 
 .vitro-read-only .vitro-label {
-    color: #C0CAD5;
+    color: #8E98A3;
 }
 
 .vitro-read-only :global(.k-picker-wrap .k-select) {

package/css/std/controls/input/input.css

@@ -76,6 +76,10 @@
     color: #4A556C;
 }
 
+.vitro-read-only .vitro-label {
+    color: #8E98A3;
+}
+
 .vitro-error input,
 .vitro-error textarea {
     border-color: #D13438;

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

@@ -31,6 +31,10 @@
     user-select: none;
 }
 
+.vitro-read-only .vitro-label {
+    color: #8E98A3;
+}
+
 .vitro-read-only input::selection {
     background: white;
     color: #4A556C;

package/css/std/controls/message-input/message-input.css

@@ -49,6 +49,7 @@
     pointer-events: none;
     text-overflow: ellipsis;
     overflow: hidden;
+    user-select: none;
 }
 
 .vitro-button-add-file {

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

@@ -65,7 +65,7 @@
 }
 
 .vitro-read-only .vitro-label {
-    color: #C0CAD5;
+    color: #8E98A3;
 }
 
 .vitro-read-only :global(.k-picker-wrap .k-select) {

package/dist/controls/ImagePicker/ImagePicker.d.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from 'react';
+/// <reference types="react" />
 import { DropdownItem } from '../DropdownButton/DropdownItem';
 interface ImagePickerProps {
-    inputFileRef: MutableRefObject<HTMLInputElement | null>;
     label: string;
+    name?: string;
     itemList?: DropdownItem[];
     defaultUrl?: string;
     classNameRoot?: string;
@@ -10,7 +10,7 @@ interface ImagePickerProps {
     classNameDefaultIcon?: string;
     imgUrlUpload?: string;
     imgUrlDelete?: string;
-    onDelete: () => void;
+    onChange: (file: File | null, name?: string) => void;
 }
 export declare const ImagePicker: (props: ImagePickerProps) => JSX.Element;
 export {};

package/dist/index.css

@@ -1852,6 +1852,10 @@
     color: #4A556C;
 }
 
+._input_vitro-read-only_3f-cBbK ._input_vitro-label_2XBESiY {
+    color: #8E98A3;
+}
+
 ._input_vitro-error_1T3dLzB input,
 ._input_vitro-error_1T3dLzB textarea {
     border-color: #D13438;
@@ -2444,7 +2448,7 @@
 }
 
 ._date-picker_vitro-read-only_2NZoMN5 ._date-picker_vitro-label_2jh9qxb {
-    color: #C0CAD5;
+    color: #8E98A3;
 }
 
 ._date-picker_vitro-read-only_2NZoMN5 .k-picker-wrap .k-select {
@@ -2786,7 +2790,7 @@
 }
 
 ._time-picker_vitro-read-only_NlE18Zm ._time-picker_vitro-label_2b97aCy {
-    color: #C0CAD5;
+    color: #8E98A3;
 }
 
 ._time-picker_vitro-read-only_NlE18Zm .k-picker-wrap .k-select {
@@ -3181,6 +3185,10 @@
             user-select: none;
 }
 
+._lookup-picker_vitro-read-only_32NOdGB ._lookup-picker_vitro-label_2QoJkUz {
+    color: #8E98A3;
+}
+
 ._lookup-picker_vitro-read-only_32NOdGB input::-moz-selection {
     background: white;
     color: #4A556C;
@@ -4544,6 +4552,9 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     pointer-events: none;
     text-overflow: ellipsis;
     overflow: hidden;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
 }
 
 ._message-input_vitro-button-add-file_1qdtHHq {

package/dist/index.js

@@ -61706,6 +61706,7 @@ var LookupPicker = function LookupPicker(props) {
   };
   var onChange = function onChange(e) {
     setState(styles$q['vitro-focus']);
+    setValueListVisible(true);
     setInputValue(e.target.value);
   };
   var onKeyDown = function onKeyDown(e) {
@@ -64144,12 +64145,12 @@ var MessageInput = function MessageInput(props) {
   var onEnter = function onEnter() {
     props.onSubmit(getValue());
     resetValue();
-    setIsShowPlaceholder(true);
   };
   var onKeyDown = function onKeyDown(e) {
     if (e.keyCode === 13 && !e.shiftKey) {
       e.preventDefault();
       onEnter();
+      setIsShowPlaceholder(false);
     }
   };
   var onChange = function onChange(e) {
@@ -64165,18 +64166,21 @@ var MessageInput = function MessageInput(props) {
     var value = getValue();
     if (!value) {
       resetValue();
-      setIsShowPlaceholder(true);
     }
   };
   var getValue = function getValue() {
+    if (isShowPlaceholder) {
+      return CTRL.EMPTY;
+    }
     if (inputRef.current) {
       return inputRef.current.innerText.replace(NEW_LINE, CTRL.EMPTY);
     }
     return CTRL.EMPTY;
   };
   var resetValue = function resetValue() {
-    if (inputRef.current) {
+    if (inputRef.current && !isShowPlaceholder) {
       inputRef.current.innerText = CTRL.EMPTY;
+      setIsShowPlaceholder(true);
     }
   };
   return React__default.createElement("div", {
@@ -64220,7 +64224,8 @@ var LOCALE$7;
 
 var ImagePicker = function ImagePicker(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var renderPrevie = function renderPrevie() {
+  var inputFileRef = React.useRef(null);
+  var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
         className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$J['vitro-image-picker-icon-wrapper']
@@ -64236,12 +64241,16 @@ var ImagePicker = function ImagePicker(props) {
       }));
     }
   };
+  var onChange = function onChange(e) {
+    var _e$target$files$, _e$target$files;
+    props.onChange((_e$target$files$ = e === null || e === void 0 ? void 0 : (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]) != null ? _e$target$files$ : null, props.name);
+  };
   var defaultItemList = React.useMemo(function () {
     var _props$itemList;
     var result = [{
       onClick: function onClick() {
-        var _props$inputFileRef, _props$inputFileRef$c;
-        return (_props$inputFileRef = props.inputFileRef) === null || _props$inputFileRef === void 0 ? void 0 : (_props$inputFileRef$c = _props$inputFileRef.current) === null || _props$inputFileRef$c === void 0 ? void 0 : _props$inputFileRef$c.click();
+        var _inputFileRef$current;
+        return inputFileRef === null || inputFileRef === void 0 ? void 0 : (_inputFileRef$current = inputFileRef.current) === null || _inputFileRef$current === void 0 ? void 0 : _inputFileRef$current.click();
       },
       text: localeService.create(LOCALE$7.ACTION_UPLOAD),
       value: ACTION$1.UPLOAD,
@@ -64253,7 +64262,9 @@ var ImagePicker = function ImagePicker(props) {
     }];
     if (props.defaultUrl) {
       result.push({
-        onClick: props.onDelete,
+        onClick: function onClick() {
+          return onChange(null);
+        },
         text: localeService.create(LOCALE$7.ACTION_DELETE),
         value: ACTION$1.DELETE,
         key: ACTION$1.DELETE,
@@ -64277,9 +64288,10 @@ var ImagePicker = function ImagePicker(props) {
   }), React__default.createElement("input", {
     type: 'file',
     className: styles$J['vitro-image-picker-input'],
-    ref: props.inputFileRef,
+    ref: inputFileRef,
+    onChange: onChange,
     accept: "image/*"
-  }), renderPrevie()));
+  }), renderPreview()));
 };
 
 var styles$K = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};