@vitrosoftware/common-ui-ts 1.1.255 → 1.1.256

package/css/std/controls/table-view/img/context-button.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.5" cy="6" r="1.5" fill="#222D44"/>
+<circle cx="11.5" cy="12" r="1.5" fill="#222D44"/>
+<circle cx="11.5" cy="18" r="1.5" fill="#222D44"/>
+</svg>

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

@@ -209,6 +209,28 @@ vitro-table-view-popup-menu-topMain.TWMenuMainRight::before,
     background-color: #E4E6EC;
 }
 
+.vitro-table-view-button-container {
+    display: flex;
+    gap: 4px;
+}
+
+.vitro-table-view-button-container > div {
+    width: 24px;
+    height: 24px;
+    margin-left: 0;
+    flex-shrink: 0;
+}
+
+.vitro-table-view-button-container > .vitro-button-calendar {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/img/date-picker.svg');
+    background-size: 24px;
+}
+
+.vitro-table-view-button-container > .vitro-table-view-button-context {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/img/context-button.svg');
+    background-size: 24px;
+}
+
 @media (max-width: 800px) {
     .vitro-table-view-context-menuMain .TWMenuFocus,
     .vitro-table-view-context-menu-leftMain .TWMenuFocus,

package/dist/index.js

@@ -21363,6 +21363,12 @@ var XML_ATTRIBUTE;
 (function (XML_ATTRIBUTE) {
   XML_ATTRIBUTE["ROWS"] = "Rows";
 })(XML_ATTRIBUTE || (XML_ATTRIBUTE = {}));
+var CSS_CLASS;
+(function (CSS_CLASS) {
+  CSS_CLASS["BUTTON_CONTEXT"] = "vitro-table-view-button-context";
+  CSS_CLASS["BUTTON_CALENDAR"] = "vitro-button-calendar";
+  CSS_CLASS["BUTTON_CONTAINER"] = "vitro-table-view-button-container";
+})(CSS_CLASS || (CSS_CLASS = {}));
 
 var TableViewConstants = {
     __proto__: null,
@@ -21401,7 +21407,8 @@ var TableViewConstants = {
     get GANTT_MENU_ACTION () { return GANTT_MENU_ACTION; },
     GANTT_COLUMN_LIST: GANTT_COLUMN_LIST,
     get XML_TAG () { return XML_TAG; },
-    get XML_ATTRIBUTE () { return XML_ATTRIBUTE; }
+    get XML_ATTRIBUTE () { return XML_ATTRIBUTE; },
+    get CSS_CLASS () { return CSS_CLASS; }
 };
 
 var w$1 = window;
@@ -64836,7 +64843,7 @@ var ICONS;
   ICONS["CLEAN"] = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.719 10.286L12.7265 6.293C12.6336 6.2001 12.5234 6.1264 12.402 6.07612C12.2807 6.02584 12.1506 5.99996 12.0192 5.99996C11.8879 5.99996 11.7578 6.02584 11.6365 6.07612C11.5151 6.1264 11.4049 6.2001 11.312 6.293L8.633 8.972L6.5 3H5.5L3 10H4L4.4995 8.5H7.4995L7.901 9.704L4.293 13.312C4.2001 13.4049 4.1264 13.5151 4.07612 13.6365C4.02584 13.7578 3.99996 13.8879 3.99996 14.0192C3.99996 14.1506 4.02584 14.2807 4.07612 14.402C4.1264 14.5234 4.2001 14.6336 4.293 14.7265L6.566 17H11.361L16.719 11.6415C16.8081 11.5525 16.8787 11.4468 16.927 11.3305C16.9752 11.2141 17 11.0894 17 10.9635C17 10.8376 16.9752 10.7129 16.927 10.5965C16.8787 10.4802 16.8081 10.3745 16.719 10.2855M4.8325 7.5L5.998 4L7.166 7.5H4.8325ZM10.9475 16H6.98L5 14.019L8.156 10.8635L12.12 14.827L10.9475 16ZM12.8275 14.12L8.8635 10.1565L12.0195 7L15.983 10.9635L12.8275 14.12Z\" fill=\"#4A556C\"/></svg>";
   ICONS["MORE"] = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11.5\" cy=\"6\" r=\"1.5\" fill=\"#222D44\"/><circle cx=\"11.5\" cy=\"12\" r=\"1.5\" fill=\"#222D44\"/><circle cx=\"11.5\" cy=\"18\" r=\"1.5\" fill=\"#222D44\"/></svg>";
 })(ICONS || (ICONS = {}));
-var CSS_CLASS;
+var CSS_CLASS$1;
 (function (CSS_CLASS) {
   CSS_CLASS["WRAP"] = "vitro-rich-text-wrap";
   CSS_CLASS["BTN_MORE_DROPDOWN"] = "vitro-btn-more-dropdown";
@@ -64850,7 +64857,7 @@ var CSS_CLASS;
   CSS_CLASS["READONLY"] = "vitro-readonly";
   CSS_CLASS["FOCUS"] = "vitro-focus";
   CSS_CLASS["CONTAINER_PREFIX"] = "vitro-rich-text_";
-})(CSS_CLASS || (CSS_CLASS = {}));
+})(CSS_CLASS$1 || (CSS_CLASS$1 = {}));
 var BTN_MORE_ELM;
 (function (BTN_MORE_ELM) {
   BTN_MORE_ELM["GRP"] = "<span class=\"ql-formats vitro-btn-more-grp\" />";
@@ -64896,13 +64903,13 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
           $$5(_this2.textarea).val(_this2.getText());
           $$5(_this2.textarea).trigger(exports.EVENT.CHANGE);
         }
-        $$5(_this2.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).removeClass(CSS_CLASS.FOCUS);
+        $$5(_this2.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).removeClass(CSS_CLASS$1.FOCUS);
         settings.onBlur();
         if (settings.isRichTextToolbarEnabled) {
           _this2.toolbarHide();
         }
       } else {
-        $$5(_this2.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).addClass(CSS_CLASS.FOCUS);
+        $$5(_this2.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).addClass(CSS_CLASS$1.FOCUS);
         settings.onFocus();
         if (settings.isRichTextToolbarEnabled) {
           _this2.toolbarShow();
@@ -64910,7 +64917,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
       }
     });
     if (settings.isReadOnly || settings.isDisabled) {
-      $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).addClass(CSS_CLASS.READONLY);
+      $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).addClass(CSS_CLASS$1.READONLY);
     }
     this.setHeight(settings.rows, settings.height, settings.minHeight, settings.maxHeight);
     this.fixPickerPosition();
@@ -64939,9 +64946,9 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
     var _this = this;
     $$5(window).on(exports.EVENT.CLICK, function (e) {
       var toolbar = _this.getToolbarElm();
-      var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN);
-      var dropDownPickers = dropdown.find(CTRL.DOT + CSS_CLASS.PICKER_LABEL);
-      var btnMore = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE);
+      var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN);
+      var dropDownPickers = dropdown.find(CTRL.DOT + CSS_CLASS$1.PICKER_LABEL);
+      var btnMore = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE);
       var isCloseDropdown = true;
       if (e.target == btnMore[0] || e.target == btnMore.find(SVG)[0] || $$5(e.target).closest(SVG)[0] == btnMore.find(SVG)[0]) {
         isCloseDropdown = false;
@@ -64959,7 +64966,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   };
   _proto.bindOnClickBtnMore = function bindOnClickBtnMore(btn) {
     btn.on(exports.EVENT.CLICK, function () {
-      btn.parent().find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN).toggle();
+      btn.parent().find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN).toggle();
     });
   };
   _proto.prepareBtnMoreDropdown = function prepareBtnMoreDropdown(dropdown) {
@@ -64979,7 +64986,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   };
   _proto.bindToolbarResizeHandler = function bindToolbarResizeHandler() {
     var _this3 = this;
-    var editorWrap = $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP)[0];
+    var editorWrap = $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP)[0];
     var resizeObserver = new window.ResizeObserver(function (entries) {
       _this3.toolbarResizeHandler();
     });
@@ -64989,7 +64996,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
     var _this4 = this;
     var toolbar = this.getToolbarElm();
     if (this.settings.isRichTextToolbarEnabled) {
-      var editorWrap = $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP);
+      var editorWrap = $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP);
       toolbar.outerWidth(editorWrap.width());
     }
     var toolbarWidth = toolbar.width();
@@ -65037,7 +65044,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   };
   _proto.getBtnMore = function getBtnMore() {
     var toolbar = this.getToolbarElm();
-    var btn = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_GRP);
+    var btn = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_GRP);
     return btn;
   };
   _proto.hideMoreBtn = function hideMoreBtn() {
@@ -65050,47 +65057,47 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   };
   _proto.hideMoreDropdown = function hideMoreDropdown() {
     var toolbar = this.getToolbarElm();
-    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN);
+    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN);
     dropdown.hide();
   };
   _proto.moveToolbarBtnToMoreDropdown = function moveToolbarBtnToMoreDropdown(grpIndex, btnIndex) {
     var btn = this.getBtnCssClass(grpIndex, btnIndex);
     var toolbar = this.getToolbarElm();
-    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN);
-    var grpTo = dropdown.find(CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex);
-    toolbar.find(CTRL.GT + CTRL.SPACE + CTRL.DOT + CSS_CLASS.TOOLBAR_GRP + CTRL.SPACE + CTRL.GT + CTRL.SPACE + CTRL.DOT + btn).prependTo(grpTo);
+    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN);
+    var grpTo = dropdown.find(CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex);
+    toolbar.find(CTRL.GT + CTRL.SPACE + CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP + CTRL.SPACE + CTRL.GT + CTRL.SPACE + CTRL.DOT + btn).prependTo(grpTo);
   };
   _proto.moveToolbarBtnFromMoreDropdown = function moveToolbarBtnFromMoreDropdown(grpIndex, btnIndex) {
     var btn = this.getBtnCssClass(grpIndex, btnIndex);
     var toolbar = this.getToolbarElm();
-    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN);
-    var grpTo = toolbar.find(CTRL.GT + CTRL.SPACE + CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex);
+    var dropdown = toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN);
+    var grpTo = toolbar.find(CTRL.GT + CTRL.SPACE + CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex);
     dropdown.find(CTRL.DOT + btn).appendTo(grpTo);
   };
   _proto.showToolbarDropDownGrp = function showToolbarDropDownGrp(grpIndex) {
     var toolbar = this.getToolbarElm();
-    toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN).find(CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex).show();
+    toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN).find(CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex).show();
   };
   _proto.hideToolbarDropDownGrp = function hideToolbarDropDownGrp(grpIndex) {
     var toolbar = this.getToolbarElm();
-    toolbar.find(CTRL.DOT + CSS_CLASS.BTN_MORE_DROPDOWN).find(CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex).hide();
+    toolbar.find(CTRL.DOT + CSS_CLASS$1.BTN_MORE_DROPDOWN).find(CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex).hide();
   };
   _proto.getBtnCssClass = function getBtnCssClass(grpIndex, btnIndex) {
     var toolbarGrpList = this.settings.modules.toolbar.container;
     var grpItem = toolbarGrpList[grpIndex];
     if (typeof grpItem[btnIndex] === TYPE_STRING) {
-      return CSS_CLASS.BTN_PREFIX + grpItem[btnIndex];
+      return CSS_CLASS$1.BTN_PREFIX + grpItem[btnIndex];
     } else {
-      return CSS_CLASS.BTN_PREFIX + Object.keys(grpItem[btnIndex])[0];
+      return CSS_CLASS$1.BTN_PREFIX + Object.keys(grpItem[btnIndex])[0];
     }
   };
   _proto.showToolbarGrp = function showToolbarGrp(grpIndex) {
     var toolbar = this.getToolbarElm();
-    toolbar.find(CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex).show();
+    toolbar.find(CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex).show();
   };
   _proto.hideToolbarGrp = function hideToolbarGrp(grpIndex) {
     var toolbar = this.getToolbarElm();
-    toolbar.find(CTRL.DOT + CSS_CLASS.TOOLBAR_GRP).eq(grpIndex).hide();
+    toolbar.find(CTRL.DOT + CSS_CLASS$1.TOOLBAR_GRP).eq(grpIndex).hide();
   };
   _proto.getToolbarElm = function getToolbarElm() {
     return $$5(this.editor.theme.modules.toolbar.container);
@@ -65124,15 +65131,15 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   _proto.checkPickerPosition = function checkPickerPosition(item) {
     if ($$5(item.options).is(':visible')) {
       if ($$5(item.container).offset().left + $$5(item.options).width() + PICKER_MARGIN_R > $$5('#root').width()) {
-        $$5(item.options).addClass(CSS_CLASS.POS_R);
+        $$5(item.options).addClass(CSS_CLASS$1.POS_R);
       } else {
-        $$5(item.options).removeClass(CSS_CLASS.POS_R);
+        $$5(item.options).removeClass(CSS_CLASS$1.POS_R);
       }
     }
   };
   _proto.isEditorBlur = function isEditorBlur() {
     if (document.activeElement) {
-      return !$$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).is($$5(document.activeElement).closest(CTRL.DOT + CSS_CLASS.WRAP));
+      return !$$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).is($$5(document.activeElement).closest(CTRL.DOT + CSS_CLASS$1.WRAP));
     } else {
       return true;
     }
@@ -65198,11 +65205,11 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
   };
   _proto.enable = function enable() {
     this.editor.enable(true);
-    $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).removeClass(CSS_CLASS.READONLY);
+    $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).removeClass(CSS_CLASS$1.READONLY);
   };
   _proto.disable = function disable() {
     this.editor.enable(false);
-    $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS.WRAP).addClass(CSS_CLASS.READONLY);
+    $$5(this.textarea).closest(CTRL.DOT + CSS_CLASS$1.WRAP).addClass(CSS_CLASS$1.READONLY);
   };
   _proto.getText = function getText() {
     return this.editor.getSemanticHTML();
@@ -65282,10 +65289,10 @@ var Textarea = React.forwardRef(function (props, ref) {
     return settings;
   };
   var getContainerClassName = function getContainerClassName() {
-    return CSS_CLASS.CONTAINER_PREFIX + props.name;
+    return CSS_CLASS$1.CONTAINER_PREFIX + props.name;
   };
   if (props.isRichText) {
-    var editorWrapClass = CSS_CLASS.WRAP + (props.isRichTextToolbarEnabled ? CTRL.SPACE + CSS_CLASS.FLOATED : CTRL.EMPTY);
+    var editorWrapClass = CSS_CLASS$1.WRAP + (props.isRichTextToolbarEnabled ? CTRL.SPACE + CSS_CLASS$1.FLOATED : CTRL.EMPTY);
     return React__default.createElement("div", {
       className: editorWrapClass,
       translate: "no"
@@ -65794,14 +65801,23 @@ var DatePicker = React.forwardRef(function (props, ref) {
   var pickerRef = React.useRef(null);
   var isOpenedRef = React.useRef(false);
   var onChangeFuncRef = React.useRef(props.onChange);
+  var onCloseFuncRef = React.useRef(props.onClose);
+  var initialValueRef = React.useRef(props.value);
+  var propsValueRef = React.useRef(props.value);
   var componentName = props.isTimeSelectEnabled ? 'kendoDateTimePicker' : 'kendoDatePicker';
+  var setInitialValue = function setInitialValue() {
+    var _$$data, _$$data$dateView;
+    initialValueRef.current = props.isTimeSelectEnabled ? props.value || ((_$$data = $$6(inputRef.current).data(componentName)) === null || _$$data === void 0 ? void 0 : (_$$data$dateView = _$$data.dateView) === null || _$$data$dateView === void 0 ? void 0 : _$$data$dateView._current) : props.value;
+  };
   React.useEffect(function () {
     if (inputRef.current) {
       init();
     }
   }, [inputRef]);
   React.useEffect(function () {
+    propsValueRef.current = props.value;
     if (ready) {
+      setInitialValue();
       if (props.value) {
         $$6(inputRef.current).data(componentName).value(new Date(props.value));
       } else {
@@ -65838,6 +65854,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     onChangeFuncRef.current = props.onChange;
   }, [props.onChange]);
+  React.useEffect(function () {
+    onCloseFuncRef.current = props.onClose;
+  }, [props.onClose]);
   React.useImperativeHandle(ref, function () {
     return _extends({}, pickerRef.current ? pickerRef.current : {}, {
       focus: function focus() {
@@ -65852,6 +65871,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
       },
       setOnChange: function setOnChange(func) {
         onChangeFuncRef.current = func;
+      },
+      setOnClose: function setOnClose(func) {
+        onCloseFuncRef.current = func;
       }
     });
   });
@@ -65864,6 +65886,27 @@ var DatePicker = React.forwardRef(function (props, ref) {
       (_picker$dateView = picker.dateView) === null || _picker$dateView === void 0 ? void 0 : (_picker$dateView$popu = _picker$dateView.popup) === null || _picker$dateView$popu === void 0 ? void 0 : (_picker$dateView$popu2 = _picker$dateView$popu.element) === null || _picker$dateView$popu2 === void 0 ? void 0 : _picker$dateView$popu2.addClass(styles$U['vitro-calendar-container']);
     }
   };
+  var initDateViewClose = function initDateViewClose(picker) {
+    var originalClose = picker.dateView.close;
+    if (originalClose) {
+      picker.dateView.close = function () {
+        if (picker.dateView.popup) {
+          originalClose.apply(picker.dateView, arguments);
+        }
+      };
+    }
+  };
+  var initOnClickDateView = function initOnClickDateView(picker) {
+    if (picker.dateView.div) {
+      $$6(picker.dateView.div).on(exports.EVENT.CLICK, '.k-calendar td a', function (e) {
+        var _e$target, _e$target$parentEleme;
+        e.preventDefault();
+        if ((_e$target = e.target) !== null && _e$target !== void 0 && (_e$target$parentEleme = _e$target.parentElement) !== null && _e$target$parentEleme !== void 0 && _e$target$parentEleme.classList.contains('k-today') && !propsValueRef.current) {
+          initialValueRef.current = undefined;
+        }
+      });
+    }
+  };
   var init = function init() {
     var config = getConfig();
     if (props.minValue) {
@@ -65881,13 +65924,16 @@ var DatePicker = React.forwardRef(function (props, ref) {
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
     pickerRef.current = picker;
-    if (picker.popup && picker.popup.bind) {
+    if (picker.popup && picker.popup.bind && props.isTimeSelectEnabled) {
       var timePickerService = new TimePickerServiceImpl();
       picker.popup.bind(EVENT$5.ACTIVATE, function () {
         return timePickerService.initHours.bind(timePickerService)(picker);
       });
       picker.popup.bind(EVENT$5.OPEN, onOpen);
     }
+    initOnClickDateView(picker);
+    initDateViewClose(picker);
+    setInitialValue();
     setReady(true);
   };
   var getConfig = function getConfig() {
@@ -65926,9 +65972,10 @@ var DatePicker = React.forwardRef(function (props, ref) {
               var button = (_$$data$popup = $$6(inputRef.current).data(componentName).popup) === null || _$$data$popup === void 0 ? void 0 : (_$$data$popup$element = _$$data$popup.element) === null || _$$data$popup$element === void 0 ? void 0 : _$$data$popup$element.find(".k-action-buttons .k-time-accept.k-primary");
               button === null || button === void 0 ? void 0 : button.click();
             }, 0);
+          } else {
+            onClose(e);
           }
           isOpenedRef.current = false;
-          onClose(e);
         }
       }
     };
@@ -65960,8 +66007,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
   };
   var onClose = function onClose(e) {
     onBlur(e);
-    if (props.onClose) {
-      props.onClose(e.sender.value(), props.name);
+    if (onCloseFuncRef.current) {
+      var value = e.sender.value ? e.sender.value() : null;
+      onCloseFuncRef.current(value, props.name);
     }
   };
   var isChangedValue = function isChangedValue(oldVal, newVal) {
@@ -65984,10 +66032,18 @@ var DatePicker = React.forwardRef(function (props, ref) {
         value.setHours(selectedTime.getHours(), selectedTime.getMinutes(), 0, 0);
         e.sender.value(value);
       }
-      if (isChangedValue(props.value, value)) {
+      if (isChangedValue(initialValueRef.current, value)) {
         onChangeFuncRef.current(value, props.name);
+      } else if (!propsValueRef.current) {
+        e.sender.value(null);
+        setOptions({
+          dateInput: true
+        });
       }
     }
+    if (props.isTimeSelectEnabled) {
+      onClose(e);
+    }
   };
   var onPaste = function onPaste(e) {
     if (!props.isReadOnly && !props.isDisabled) {
@@ -67554,7 +67610,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.255";
+var version$1 = "1.1.256";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";