indicator-ui 0.0.374 → 0.0.375

package/dist/index.js

@@ -53181,7 +53181,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   DAYS_NUM_IN_DATE_PICKER: () => (/* reexport safe */ _const__WEBPACK_IMPORTED_MODULE_3__.DAYS_NUM_IN_DATE_PICKER),
 /* harmony export */   DatePicker: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.DatePicker),
 /* harmony export */   DateTimePicker: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.DateTimePicker),
-/* harmony export */   DateTimePickerSmart: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.DateTimePickerSmart),
 /* harmony export */   ELEMENT_ATTRIBUTE_NAME: () => (/* reexport safe */ _config__WEBPACK_IMPORTED_MODULE_4__.ELEMENT_ATTRIBUTE_NAME),
 /* harmony export */   Footer: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.Footer),
 /* harmony export */   Header: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.Header),
@@ -53974,13 +53973,13 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
-function DateTimePicker(_ref) {
-  var date = _ref.date,
-    onSubmit = _ref.onSubmit,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'datetime' : _ref$type,
-    onCancel = _ref.onCancel,
-    subTitle = _ref.subTitle;
+var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var date = props.date,
+    onSubmit = props.onSubmit,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'datetime' : _props$type,
+    onCancel = props.onCancel,
+    subTitle = props.subTitle;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_ui__WEBPACK_IMPORTED_MODULE_4__.convertDate)({
       initDate: date,
       type: type
@@ -54139,6 +54138,7 @@ function DateTimePicker(_ref) {
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.DateTimePicker,
+    ref: ref,
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.header,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
@@ -54170,65 +54170,7 @@ function DateTimePicker(_ref) {
       })]
     })]
   });
-}
-
-/***/ }),
-
-/***/ "./src/ui/DateTimePicker/ui/DateTimePickerSmart.tsx":
-/*!**********************************************************!*\
-  !*** ./src/ui/DateTimePicker/ui/DateTimePickerSmart.tsx ***!
-  \**********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   DateTimePickerSmart: () => (/* binding */ DateTimePickerSmart)
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "isShow", "close", "parentRef", "position"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-
-
-
-
-function DateTimePickerSmartMain(props) {
-  var wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var className = props.className,
-    isShow = props.isShow,
-    close = props.close,
-    parentRef = props.parentRef,
-    position = props.position,
-    anotherProps = _objectWithoutProperties(props, _excluded);
-  (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useInteractiveZone)(parentRef || wrapperRef, {
-    onMissClick: close
-  });
-  (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useSmartPosition)(wrapperRef, {
-    parentRef: parentRef,
-    position: position
-  });
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-    className: className,
-    ref: wrapperRef,
-    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.DateTimePicker, _objectSpread({}, anotherProps))
-  });
-}
-function DateTimePickerSmart(props) {
-  var isShow = props.isShow;
-  return isShow ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(DateTimePickerSmartMain, _objectSpread({}, props)) : undefined;
-}
+});
 
 /***/ }),
 
@@ -54752,28 +54694,25 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CalendarButton: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.CalendarButton),
-/* harmony export */   CalendarDay: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.CalendarDay),
-/* harmony export */   CalendarMonth: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.CalendarMonth),
-/* harmony export */   CalendarYear: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.CalendarYear),
-/* harmony export */   DatePicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_4__.DatePicker),
+/* harmony export */   CalendarButton: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.CalendarButton),
+/* harmony export */   CalendarDay: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.CalendarDay),
+/* harmony export */   CalendarMonth: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.CalendarMonth),
+/* harmony export */   CalendarYear: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.CalendarYear),
+/* harmony export */   DatePicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_3__.DatePicker),
 /* harmony export */   DateTimePicker: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_0__.DateTimePicker),
-/* harmony export */   DateTimePickerSmart: () => (/* reexport safe */ _DateTimePickerSmart__WEBPACK_IMPORTED_MODULE_1__.DateTimePickerSmart),
-/* harmony export */   Footer: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_3__.Footer),
-/* harmony export */   Header: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_3__.Header),
-/* harmony export */   Main: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_3__.Main),
-/* harmony export */   MonthPicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_4__.MonthPicker),
-/* harmony export */   TimePicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_4__.TimePicker),
-/* harmony export */   TimePickerFeed: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.TimePickerFeed),
-/* harmony export */   TimePickerTag: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_2__.TimePickerTag),
-/* harmony export */   YearPicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_4__.YearPicker)
+/* harmony export */   Footer: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_2__.Footer),
+/* harmony export */   Header: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_2__.Header),
+/* harmony export */   Main: () => (/* reexport safe */ _parts__WEBPACK_IMPORTED_MODULE_2__.Main),
+/* harmony export */   MonthPicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_3__.MonthPicker),
+/* harmony export */   TimePicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_3__.TimePicker),
+/* harmony export */   TimePickerFeed: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.TimePickerFeed),
+/* harmony export */   TimePickerTag: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.TimePickerTag),
+/* harmony export */   YearPicker: () => (/* reexport safe */ _pickers__WEBPACK_IMPORTED_MODULE_3__.YearPicker)
 /* harmony export */ });
 /* harmony import */ var _DateTimePicker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DateTimePicker */ "./src/ui/DateTimePicker/ui/DateTimePicker.tsx");
-/* harmony import */ var _DateTimePickerSmart__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DateTimePickerSmart */ "./src/ui/DateTimePicker/ui/DateTimePickerSmart.tsx");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components */ "./src/ui/DateTimePicker/ui/components/index.ts");
-/* harmony import */ var _parts__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./parts */ "./src/ui/DateTimePicker/ui/parts/index.ts");
-/* harmony import */ var _pickers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./pickers */ "./src/ui/DateTimePicker/ui/pickers/index.ts");
-
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components */ "./src/ui/DateTimePicker/ui/components/index.ts");
+/* harmony import */ var _parts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./parts */ "./src/ui/DateTimePicker/ui/parts/index.ts");
+/* harmony import */ var _pickers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./pickers */ "./src/ui/DateTimePicker/ui/pickers/index.ts");
 
 
 
@@ -56994,7 +56933,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeField":"DateTimeField-module__DateTimeField___k_mN4","modalWindow":"DateTimeField-module__modalWindow___nlVRf","widthFill":"DateTimeField-module__widthFill___OqxwA","widthHug":"DateTimeField-module__widthHug___IWSNw","flexField":"DateTimeField-module__flexField___gDZ5r","disabled":"DateTimeField-module__disabled___Gk46h"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeField":"DateTimeField-module__DateTimeField___k_mN4","widthFill":"DateTimeField-module__widthFill___OqxwA","widthHug":"DateTimeField-module__widthHug___IWSNw","flexField":"DateTimeField-module__flexField___gDZ5r","disabled":"DateTimeField-module__disabled___Gk46h"});
 
 /***/ }),
 
@@ -57115,12 +57054,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
-/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
-/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
+/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
+/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["value", "onChange", "dateFormat", "outFormat", "additionStyle", "datePlaceholder", "iconDate", "textDate", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -57146,6 +57086,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 function DateField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -57176,23 +57117,26 @@ function DateField(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
     setIsFocus = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowModalWindow = _useState4[0],
-    setIsShowModalWindow = _useState4[1];
   var dateTimeFieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+  var datePickerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useModal)(datePickerRef, {
+      targetRef: dateTimeFieldRef,
+      animeType: 'popover'
+    }),
+    open = _useModal.open,
+    close = _useModal.close;
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
       value: value,
       outFormat: outFormat,
       dateFormat: dateFormat
     })),
-    _useState6 = _slicedToArray(_useState5, 2),
-    date = _useState6[0],
-    setDate = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    date = _useState4[0],
+    setDate = _useState4[1];
   // Получаем дату в выходном формате
   // (в формате, который понимает внешний приемник и поле, формат скрыт от пользователя)
   var getDateTimeFormatValue = function getDateTimeFormatValue(newValue) {
-    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(newValue, {
+    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(newValue, {
       to: outFormat,
       errorNull: true
     }) : null;
@@ -57200,7 +57144,7 @@ function DateField(_ref) {
   // Получение даты компонента
   var getDateTimeValue = function getDateTimeValue() {
     var resDate = new Date();
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setDateInDate)(resDate, date, dateFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setDateInDate)(resDate, date, dateFormat);
     return resDate;
   };
   // Получение форматированной даты компонента
@@ -57218,7 +57162,7 @@ function DateField(_ref) {
   var getDateTimeForDateTimePicker = function getDateTimeForDateTimePicker() {
     var resDate = undefined;
     if (date) {
-      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(getDateTimeValue(), {
+      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(getDateTimeValue(), {
         errorNull: true
       });
     }
@@ -57227,7 +57171,7 @@ function DateField(_ref) {
   var setDateTime = function setDateTime(newDate) {
     var curValue = getDateTimeFormatValue(newDate);
     if (value !== curValue && curValue) {
-      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
         value: curValue,
         outFormat: outFormat,
         dateFormat: dateFormat
@@ -57236,8 +57180,8 @@ function DateField(_ref) {
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _saveParseDate;
-    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
-      from: _ui__WEBPACK_IMPORTED_MODULE_4__.DATE_TYPE_FORMAT,
+    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
+      from: _ui__WEBPACK_IMPORTED_MODULE_5__.DATE_TYPE_FORMAT,
       errorNull: true
     })) !== null && _saveParseDate !== void 0 ? _saveParseDate : undefined);
   }, [value]);
@@ -57260,10 +57204,10 @@ function DateField(_ref) {
   var handleFocus = function handleFocus(e) {
     onFocus && onFocus(e);
     setIsFocus(true);
-    setIsShowModalWindow(true);
+    open();
   };
   var getDateContent = function getDateContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_9__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_10__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: datePlaceholder,
       value: date,
       onBlur: handleBlur,
@@ -57271,25 +57215,22 @@ function DateField(_ref) {
       onChange: setDate,
       dateFormat: dateFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var onSubmit = function onSubmit(value) {
     if (typeof value === 'string') {
-      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
-        from: _ui__WEBPACK_IMPORTED_MODULE_4__.DATE_TYPE_FORMAT
+      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
+        from: _ui__WEBPACK_IMPORTED_MODULE_5__.DATE_TYPE_FORMAT
       });
       setDateTime(newDate);
-      setIsShowModalWindow(false);
+      close();
     }
   };
-  var closePicker = function closePicker() {
-    return setIsShowModalWindow(false);
-  };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: dateTimeFieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthHug, width === 'hug')),
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldMask, {
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthHug, width === 'hug')),
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldMask, {
       firstField: getDateContent(),
       iconFirst: iconDate,
       textFirst: textDate,
@@ -57298,18 +57239,12 @@ function DateField(_ref) {
       isError: isError,
       disabled: disabled,
       onXClose: clearDateTime()
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.DateTimePickerSmart, {
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_5__.DateTimePicker, {
       type: 'date',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
-      onCancel: function onCancel() {
-        return setIsShowModalWindow(false);
-      },
-      parentRef: dateTimeFieldRef,
-      isShow: isShowModalWindow,
-      close: closePicker,
-      position: position,
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.modalWindow
+      onCancel: close,
+      ref: datePickerRef
     })]
   });
 }
@@ -57443,12 +57378,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
-/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
-/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
+/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
+/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
+/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["value", "onChange", "dateFormat", "timeFormat", "outFormat", "additionStyle", "datePlaceholder", "timePlaceholder", "iconDate", "iconTime", "textDate", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -57475,6 +57411,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 function DateTimeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -57512,31 +57449,34 @@ function DateTimeField(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
     setIsFocus = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowModalWindow = _useState4[0],
-    setIsShowModalWindow = _useState4[1];
   var dateTimeFieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+  var datePickerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useModal)(datePickerRef, {
+      targetRef: dateTimeFieldRef,
+      animeType: 'popover'
+    }),
+    open = _useModal.open,
+    close = _useModal.close;
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
       timeFormat: timeFormat
     })),
-    _useState6 = _slicedToArray(_useState5, 2),
-    time = _useState6[0],
-    setTime = _useState6[1];
-  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+    _useState4 = _slicedToArray(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
       value: value,
       outFormat: outFormat,
       dateFormat: dateFormat
     })),
-    _useState8 = _slicedToArray(_useState7, 2),
-    date = _useState8[0],
-    setDate = _useState8[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    date = _useState6[0],
+    setDate = _useState6[1];
   // Получаем дату в выходном формате
   // (в формате, который понимает внешний приемник и поле, формат скрыт от пользователя)
   var getDateTimeFormatValue = function getDateTimeFormatValue(newValue) {
-    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(newValue, {
+    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(newValue, {
       to: outFormat,
       errorNull: true
     }) : null;
@@ -57544,8 +57484,8 @@ function DateTimeField(_ref) {
   // Получение даты компонента
   var getDateTimeValue = function getDateTimeValue() {
     var resDate = new Date();
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setDateInDate)(resDate, date, dateFormat);
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setTimeInDate)(resDate, time, timeFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setDateInDate)(resDate, date, dateFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setTimeInDate)(resDate, time, timeFormat);
     return resDate;
   };
   // Получение форматированной даты компонента
@@ -57563,7 +57503,7 @@ function DateTimeField(_ref) {
   var getDateTimeForDateTimePicker = function getDateTimeForDateTimePicker() {
     var resDate = undefined;
     if (time || date) {
-      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(getDateTimeValue(), {
+      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(getDateTimeValue(), {
         errorNull: true
       });
     }
@@ -57572,12 +57512,12 @@ function DateTimeField(_ref) {
   var setDateTime = function setDateTime(newDate) {
     var curValue = getDateTimeFormatValue(newDate);
     if (value !== curValue && curValue) {
-      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
         value: curValue,
         outFormat: outFormat,
         timeFormat: timeFormat
       }));
-      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
         value: curValue,
         outFormat: outFormat,
         dateFormat: dateFormat
@@ -57586,7 +57526,7 @@ function DateTimeField(_ref) {
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _saveParseDate;
-    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
+    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
       errorNull: true
     })) !== null && _saveParseDate !== void 0 ? _saveParseDate : undefined);
   }, [value]);
@@ -57610,10 +57550,10 @@ function DateTimeField(_ref) {
   var handleFocus = function handleFocus(e) {
     onFocus && onFocus(e);
     setIsFocus(true);
-    setIsShowModalWindow(true);
+    open();
   };
   var getTimeContent = function getTimeContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: timePlaceholder,
       onChange: setTime,
       onBlur: handleBlur,
@@ -57621,11 +57561,11 @@ function DateTimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var getDateContent = function getDateContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_10__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_11__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: datePlaceholder,
       value: date,
       onBlur: handleBlur,
@@ -57633,23 +57573,20 @@ function DateTimeField(_ref) {
       onChange: setDate,
       dateFormat: dateFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var onSubmit = function onSubmit(value) {
     if (typeof value === 'string') {
-      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {});
+      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {});
       setDateTime(newDate);
-      setIsShowModalWindow(false);
+      close();
     }
   };
-  var closePicker = function closePicker() {
-    return setIsShowModalWindow(false);
-  };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: dateTimeFieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthHug, width === 'hug')),
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldMask, {
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthHug, width === 'hug')),
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldMask, {
       firstField: getDateContent(),
       secondField: getTimeContent(),
       iconFirst: iconDate,
@@ -57661,18 +57598,12 @@ function DateTimeField(_ref) {
       isError: isError,
       disabled: disabled,
       onXClose: clearDateTime()
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePickerSmart, {
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'datetime',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
-      onCancel: function onCancel() {
-        return setIsShowModalWindow(false);
-      },
-      parentRef: dateTimeFieldRef,
-      isShow: isShowModalWindow,
-      close: closePicker,
-      position: position,
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.modalWindow
+      onCancel: close,
+      ref: datePickerRef
     })]
   });
 }
@@ -57697,11 +57628,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
-/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
+/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
+/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["value", "onChange", "timeFormat", "outFormat", "additionStyle", "timePlaceholder", "iconTime", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -57727,6 +57659,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 function TimeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -57757,23 +57690,26 @@ function TimeField(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
     setIsFocus = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowModalWindow = _useState4[0],
-    setIsShowModalWindow = _useState4[1];
   var dateTimeFieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+  var datePickerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useModal)(datePickerRef, {
+      targetRef: dateTimeFieldRef,
+      animeType: 'popover'
+    }),
+    open = _useModal.open,
+    close = _useModal.close;
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
       timeFormat: timeFormat
     })),
-    _useState6 = _slicedToArray(_useState5, 2),
-    time = _useState6[0],
-    setTime = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
   // Получаем дату в выходном формате
   // (в формате, который понимает внешний приемник и поле, формат скрыт от пользователя)
   var getDateTimeFormatValue = function getDateTimeFormatValue(newValue) {
-    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(newValue, {
+    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(newValue, {
       to: outFormat,
       errorNull: true
     }) : undefined;
@@ -57781,7 +57717,7 @@ function TimeField(_ref) {
   // Получение даты компонента
   var getDateTimeValue = function getDateTimeValue() {
     var resDate = new Date();
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setTimeInDate)(resDate, time, timeFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setTimeInDate)(resDate, time, timeFormat);
     return resDate;
   };
   // Получение форматированной даты компонента
@@ -57799,7 +57735,7 @@ function TimeField(_ref) {
   var getDateTimeForDateTimePicker = function getDateTimeForDateTimePicker() {
     var resDate = undefined;
     if (time) {
-      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(getDateTimeValue(), {
+      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(getDateTimeValue(), {
         errorNull: true
       });
     }
@@ -57808,7 +57744,7 @@ function TimeField(_ref) {
   var setDateTime = function setDateTime(newDate) {
     var curValue = getDateTimeFormatValue(newDate);
     if (value !== curValue && curValue) {
-      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
         value: curValue,
         outFormat: outFormat,
         timeFormat: timeFormat
@@ -57817,7 +57753,7 @@ function TimeField(_ref) {
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _saveParseDate;
-    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
+    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
       from: _ui__WEBPACK_IMPORTED_MODULE_3__.TIME_TYPE_FORMAT,
       errorNull: null
     })) !== null && _saveParseDate !== void 0 ? _saveParseDate : undefined);
@@ -57841,10 +57777,10 @@ function TimeField(_ref) {
   var handleFocus = function handleFocus(e) {
     onFocus && onFocus(e);
     setIsFocus(true);
-    setIsShowModalWindow(true);
+    open();
   };
   var getTimeContent = function getTimeContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: timePlaceholder,
       onChange: setTime,
       onBlur: handleBlur,
@@ -57852,25 +57788,22 @@ function TimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var onSubmit = function onSubmit(value) {
     if (typeof value === 'string') {
-      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
+      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
         from: _ui__WEBPACK_IMPORTED_MODULE_3__.TIME_TYPE_FORMAT
       });
       setDateTime(newDate);
-      setIsShowModalWindow(false);
+      close();
     }
   };
-  var closePicker = function closePicker() {
-    return setIsShowModalWindow(false);
-  };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: dateTimeFieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthHug, width === 'hug')),
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldMask, {
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthHug, width === 'hug')),
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldMask, {
       secondField: getTimeContent(),
       iconSecond: iconTime,
       textSecond: textTime,
@@ -57879,18 +57812,12 @@ function TimeField(_ref) {
       isError: isError,
       disabled: disabled,
       onXClose: clearDateTime()
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePickerSmart, {
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'time',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
-      onCancel: function onCancel() {
-        return setIsShowModalWindow(false);
-      },
-      parentRef: dateTimeFieldRef,
-      isShow: isShowModalWindow,
-      close: closePicker,
-      position: position,
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.modalWindow
+      onCancel: close,
+      ref: datePickerRef
     })]
   });
 }
@@ -58337,9 +58264,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../DateTimeField/styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _DateTimeField__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeField */ "./src/ui/InputFields/DateTimeField/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeRangeField/styles/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeField/styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _DateTimeField__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeField */ "./src/ui/InputFields/DateTimeField/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeRangeField/styles/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -58362,6 +58290,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function DateRangeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -58391,14 +58320,17 @@ function DateRangeField(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
     setIsFocus = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowModalWindow = _useState4[0],
-    setIsShowModalWindow = _useState4[1];
   var fieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var datePickerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useModal)(datePickerRef, {
+      targetRef: fieldRef,
+      animeType: 'popover'
+    }),
+    open = _useModal.open,
+    close = _useModal.close;
   var handleFocus = function handleFocus(e) {
     setIsFocus(true);
-    setIsShowModalWindow(true);
+    open();
     onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var handleBlur = function handleBlur(e) {
@@ -58436,7 +58368,7 @@ function DateRangeField(_ref) {
     };
   };
   var getFirst = function getFirst() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_6__.DateFieldBase, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_7__.DateFieldBase, {
       placeholder: firstPlaceholder,
       value: getDate(0),
       onBlur: handleBlur,
@@ -58447,11 +58379,11 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
     });
   };
   var getSecond = function getSecond() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_6__.DateFieldBase, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_7__.DateFieldBase, {
       placeholder: secondPlaceholder,
       value: getDate(1),
       onBlur: handleBlur,
@@ -58462,7 +58394,7 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
     });
   };
   var onSubmit = function onSubmit(value) {
@@ -58470,12 +58402,9 @@ function DateRangeField(_ref) {
       onChange === null || onChange === void 0 || onChange(value);
     }
   };
-  var closePicker = function closePicker() {
-    return setIsShowModalWindow(false);
-  };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: fieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.SingleRangeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.widthFHug, width === 'hug'), additionsStyles),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.SingleRangeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.widthFHug, width === 'hug'), additionsStyles),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMask, {
       isFocus: isFocus,
       isError: isError,
@@ -58488,18 +58417,12 @@ function DateRangeField(_ref) {
       disabled: disabled,
       width: width,
       onXClose: getClearButton()
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePickerSmart, {
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'date-range',
       date: value,
-      onCancel: function onCancel() {
-        return setIsShowModalWindow(false);
-      },
       onSubmit: onSubmit,
-      parentRef: fieldRef,
-      isShow: isShowModalWindow,
-      close: closePicker,
-      position: position,
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.modalWindow
+      onCancel: close,
+      ref: datePickerRef
     })]
   });
 }
@@ -64456,7 +64379,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   DateTimeField: () => (/* reexport safe */ _InputFields__WEBPACK_IMPORTED_MODULE_2__.DateTimeField),
 /* harmony export */   DateTimeFieldMask: () => (/* reexport safe */ _InputFields__WEBPACK_IMPORTED_MODULE_2__.DateTimeFieldMask),
 /* harmony export */   DateTimePicker: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.DateTimePicker),
-/* harmony export */   DateTimePickerSmart: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.DateTimePickerSmart),
 /* harmony export */   DateTimeRangeField: () => (/* reexport safe */ _InputFields__WEBPACK_IMPORTED_MODULE_2__.DateTimeRangeField),
 /* harmony export */   Dropdown: () => (/* reexport safe */ _Dropdown__WEBPACK_IMPORTED_MODULE_26__.Dropdown),
 /* harmony export */   DropdownItem: () => (/* reexport safe */ _DropdownItem__WEBPACK_IMPORTED_MODULE_18__.DropdownItem),
@@ -64749,7 +64671,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   DateTimeField: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DateTimeField),
 /* harmony export */   DateTimeFieldMask: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DateTimeFieldMask),
 /* harmony export */   DateTimePicker: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DateTimePicker),
-/* harmony export */   DateTimePickerSmart: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DateTimePickerSmart),
 /* harmony export */   DateTimeRangeField: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DateTimeRangeField),
 /* harmony export */   Dropdown: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.Dropdown),
 /* harmony export */   DropdownItem: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.DropdownItem),