@snack-uikit/fields 0.30.0 → 0.32.0

package/dist/cjs/{components/FieldDate/hooks → hooks/dateHandlers}/useDateField.js

@@ -6,91 +6,105 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDateField = useDateField;
 const react_1 = require("react");
 const utils_1 = require("@snack-uikit/utils");
-const constants_1 = require("../constants");
-const utils_2 = require("../utils");
-const useDateFieldHelpers_1 = require("./useDateFieldHelpers");
+const constants_1 = require("../../constants");
+const dateFields_1 = require("../../utils/dateFields");
+const useDateFieldHelpersForMode_1 = require("./useDateFieldHelpersForMode");
 function useDateField(_ref) {
   let {
     inputRef,
     onChange,
     readonly,
     locale = constants_1.DEFAULT_LOCALE,
-    setIsOpen
+    setIsOpen,
+    mode,
+    showSeconds
   } = _ref;
   var _a;
+  const dateTimeMode = mode === constants_1.MODES.DateTime && !showSeconds ? constants_1.NO_SECONDS_MODE : mode;
+  const slotsInfo = constants_1.SLOTS[dateTimeMode];
+  const mask = constants_1.MASK[dateTimeMode][locale.baseName] || constants_1.MASK[dateTimeMode][constants_1.DEFAULT_LOCALE.baseName];
+  const slotsPlaceholder = constants_1.SLOTS_PLACEHOLDER[dateTimeMode][locale.baseName] || constants_1.SLOTS_PLACEHOLDER[dateTimeMode][constants_1.DEFAULT_LOCALE.baseName];
+  const slotOrder = constants_1.SLOT_ORDER[dateTimeMode];
   const {
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
     setFocus,
     updateSlot,
     getSlot,
     isLikeDate,
     isAllSelected,
-    isValidInput,
-    tryToCompleteInput
-  } = (0, useDateFieldHelpers_1.useDateFieldHelpers)(inputRef);
-  const focusSlotRef = (0, react_1.useRef)(constants_1.SlotKey.Day);
-  const mask = (0, react_1.useMemo)(() => constants_1.MASK[locale.baseName] || constants_1.MASK[constants_1.DEFAULT_LOCALE.baseName], [locale]);
-  const slotsPlaceHolder = (0, react_1.useMemo)(() => constants_1.SLOTS_PLACEHOLDER[locale.baseName] || constants_1.SLOTS_PLACEHOLDER[constants_1.DEFAULT_LOCALE.baseName], [locale.baseName]);
+    tryToCompleteInput,
+    isValidInput
+  } = (0, useDateFieldHelpersForMode_1.useDateFieldHelpersForMode)({
+    inputRef,
+    mode: dateTimeMode
+  });
+  const focusSlotKey = (0, react_1.useMemo)(() => slotOrder[0], [slotOrder]);
+  const focusSlotRef = (0, react_1.useRef)(focusSlotKey);
   const setInputFocus = (0, react_1.useCallback)(focusSlot => {
     if (!inputRef.current || readonly) {
       return;
     }
     if ((0, utils_1.isBrowser)() && document.activeElement !== inputRef.current) {
-      focusSlotRef.current = focusSlot || constants_1.SlotKey.Day;
+      focusSlotRef.current = focusSlot || focusSlotKey;
       inputRef.current.focus();
       return;
     }
     const focusSlotValue = focusSlot || focusSlotRef.current;
-    if (isLikeDate() && focusSlotValue === constants_1.SlotKey.Day) {
+    if (isLikeDate() && focusSlotValue === focusSlotKey) {
       return;
     }
     if (!inputRef.current.value) {
       inputRef.current.value = mask;
-      setFocus(constants_1.SlotKey.Day);
+      setFocus(focusSlotKey);
       return;
     }
     if (focusSlot !== 'auto') {
       setFocus(focusSlotValue);
       return;
     }
-    const slotKey = (0, utils_2.getSlotKey)(inputRef.current.selectionStart);
+    const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
     if (slotKey) {
       const {
         start,
         end
-      } = constants_1.SLOTS[slotKey];
+      } = slotsInfo[slotKey];
       inputRef.current.setSelectionRange(start, end);
     }
-  }, [inputRef, isLikeDate, mask, readonly, setFocus]);
+  }, [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo]);
   const handleClick = (0, react_1.useCallback)(() => {
     setInputFocus('auto');
   }, [setInputFocus]);
   const handleChange = () => {
     var _a;
-    onChange && isLikeDate() && onChange(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '');
+    onChange && isLikeDate() && onChange((0, dateFields_1.parseDate)(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''));
   };
   const checkInputAndGoNext = (0, react_1.useCallback)(slotKey => {
-    if (slotKey === constants_1.SlotKey.Year && tryToCompleteInput()) {
+    var _a, _b;
+    if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
       return;
     }
     if (isValidInput()) {
-      setFocus((0, utils_2.getNextSlotKey)(slotKey));
+      setFocus(getNextSlotKey(slotKey));
       return;
     }
     switch (slotKey) {
       case constants_1.SlotKey.Day:
-        updateSlot(constants_1.SlotKey.Month, slotsPlaceHolder[constants_1.SlotKey.Month]);
+        updateSlot(constants_1.SlotKey.Month, (_a = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[constants_1.SlotKey.Month]) !== null && _a !== void 0 ? _a : '');
         setFocus(constants_1.SlotKey.Month);
         return;
       case constants_1.SlotKey.Year:
       case constants_1.SlotKey.Month:
-        updateSlot(constants_1.SlotKey.Day, slotsPlaceHolder[constants_1.SlotKey.Day]);
+        updateSlot(constants_1.SlotKey.Day, (_b = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[constants_1.SlotKey.Day]) !== null && _b !== void 0 ? _b : '');
         setFocus(constants_1.SlotKey.Day);
         return;
       default:
-        setFocus((0, utils_2.getNextSlotKey)(slotKey));
+        setFocus(getNextSlotKey(slotKey));
     }
-  }, [tryToCompleteInput, isValidInput, setFocus, slotsPlaceHolder, updateSlot]);
+  }, [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder]);
   const handleKeyDown = (0, react_1.useCallback)(e => {
+    var _a;
     if (inputRef.current && !readonly) {
       if (e.key !== 'Tab') {
         e.preventDefault();
@@ -107,31 +121,31 @@ function useDateField(_ref) {
         tryToCompleteInput();
       }
       const clickIndex = inputRef.current.selectionStart;
-      const slotKey = (0, utils_2.getSlotKey)(clickIndex);
+      const slotKey = getSlotKeyFromIndex(clickIndex);
       if (slotKey) {
         const value = getSlot(slotKey);
         const {
           max
-        } = constants_1.SLOTS[slotKey];
+        } = slotsInfo[slotKey];
         const numberValue = Number(value) || 0;
         if (e.key === 'ArrowRight') {
-          if (isAllSelected() || slotKey === constants_1.SlotKey.Year) {
+          if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
             inputRef.current.selectionStart = inputRef.current.value.length;
             return;
           }
-          setFocus((0, utils_2.getNextSlotKey)(slotKey));
+          setFocus(getNextSlotKey(slotKey));
           return;
         }
         if (e.key === 'ArrowLeft') {
-          setFocus((0, utils_2.getPrevSlotKey)(slotKey));
+          setFocus(getPrevSlotKey(slotKey));
           return;
         }
         if (e.key === 'Backspace') {
           if (isAllSelected()) {
             inputRef.current.value = mask;
-            setFocus(constants_1.SlotKey.Day);
+            setFocus(focusSlotKey);
           } else {
-            updateSlot(slotKey, slotsPlaceHolder[slotKey]);
+            updateSlot(slotKey, (_a = slotsPlaceholder[slotKey]) !== null && _a !== void 0 ? _a : '');
           }
         }
         if (/^\d+$/.test(e.key)) {
@@ -164,17 +178,18 @@ function useDateField(_ref) {
             }
           }
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(isLikeDate() ? inputRef.current.value : '');
+        const newDate = (0, dateFields_1.parseDate)(isLikeDate() ? inputRef.current.value : '');
+        onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
       }
     }
-  }, [checkInputAndGoNext, getSlot, inputRef, isAllSelected, isLikeDate, mask, onChange, readonly, setFocus, setIsOpen, slotsPlaceHolder, tryToCompleteInput, updateSlot]);
+  }, [inputRef, readonly, getSlotKeyFromIndex, setIsOpen, tryToCompleteInput, getSlot, slotsInfo, isLikeDate, onChange, isAllSelected, slotOrder, setFocus, getNextSlotKey, getPrevSlotKey, mask, focusSlotKey, updateSlot, slotsPlaceholder, checkInputAndGoNext]);
   const handleBlur = (0, react_1.useCallback)(() => {
     var _a;
     if (!readonly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === mask) {
       inputRef.current.value = '';
     }
-    focusSlotRef.current = constants_1.SlotKey.Day;
-  }, [inputRef, mask, readonly]);
+    focusSlotRef.current = focusSlotKey;
+  }, [inputRef, mask, readonly, focusSlotKey]);
   return {
     handleKeyDown,
     handleChange,

package/dist/cjs/hooks/dateHandlers/useDateFieldHelpersForMode.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { SlotKey } from '../../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../../types';
+export declare function useDateFieldHelpersForMode({ inputRef, mode, }: {
+    inputRef: RefObject<HTMLInputElement>;
+    mode: Mode | TimeMode | NoSecondsMode;
+}): {
+    isAllSelected: () => boolean;
+    isValidInput: () => boolean;
+    tryToCompleteInput: () => boolean;
+    getSlot: (slotKey: string) => string;
+    updateSlot: (slotKey: string, slotValue: number | string) => void;
+    setFocus: (slotKey: string) => void;
+    isLikeDate: () => boolean;
+    getNextSlotKey: (slotKey: SlotKey | undefined) => SlotKey;
+    getPrevSlotKey: (slotKey: SlotKey | undefined) => SlotKey;
+    getSlotKeyFromIndex: (index: number | null) => SlotKey | undefined;
+};

package/dist/cjs/hooks/dateHandlers/useDateFieldHelpersForMode.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDateFieldHelpersForMode = useDateFieldHelpersForMode;
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const dateFields_1 = require("../../utils/dateFields");
+function useDateFieldHelpersForMode(_ref) {
+  let {
+    inputRef,
+    mode
+  } = _ref;
+  const setFocus = (0, react_1.useCallback)(slotKey => {
+    if (inputRef.current) {
+      const {
+        start,
+        end
+      } = constants_1.SLOTS[mode][slotKey];
+      inputRef.current.setSelectionRange(start, end);
+    }
+  }, [mode, inputRef]);
+  const isAllSelected = (0, react_1.useCallback)(() => {
+    var _a, _b, _c;
+    return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd) && ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0;
+  }, [inputRef]);
+  const getSlot = (0, react_1.useCallback)(slotKey => {
+    if (inputRef.current) {
+      return inputRef.current.value.slice(constants_1.SLOTS[mode][slotKey].start, constants_1.SLOTS[mode][slotKey].end);
+    }
+    return '';
+  }, [mode, inputRef]);
+  const isLikeDate = (0, react_1.useCallback)(() => {
+    if (inputRef.current) {
+      return Object.keys(constants_1.SLOTS[mode]).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+    }
+    return false;
+  }, [mode, getSlot, inputRef]);
+  const isValidInput = (0, react_1.useCallback)(() => {
+    const isTimeMode = Object.values(constants_1.TIME_MODES).includes(mode);
+    if (isTimeMode) {
+      return true;
+    }
+    const day = parseInt(getSlot(constants_1.SlotKey.Day), 10);
+    const month = parseInt(getSlot(constants_1.SlotKey.Month), 10);
+    const year = parseInt(getSlot(constants_1.SlotKey.Year), 10);
+    if (!month || !day) {
+      return true;
+    }
+    const date = new Date(year || /* високосный год = */2020, month - 1, day);
+    return date.getDate() === day;
+  }, [getSlot, mode]);
+  const tryToCompleteInput = (0, react_1.useCallback)(() => {
+    var _a;
+    let isCompleted;
+    const parsedSlotsData = Object.keys(constants_1.SLOTS[mode]).reduce((res, key) => {
+      const slotKey = key;
+      res[slotKey] = parseInt(getSlot(slotKey), 10);
+      return res;
+    }, {});
+    const {
+      [constants_1.SlotKey.Day]: day,
+      [constants_1.SlotKey.Month]: month,
+      [constants_1.SlotKey.Year]: year,
+      [constants_1.SlotKey.Hours]: hours,
+      [constants_1.SlotKey.Minutes]: minutes,
+      [constants_1.SlotKey.Seconds]: seconds
+    } = parsedSlotsData;
+    const yearSlotMeta = constants_1.SLOTS[mode][constants_1.SlotKey.Year];
+    const isDateCompleted = Boolean(day && month && year >= (yearSlotMeta === null || yearSlotMeta === void 0 ? void 0 : yearSlotMeta.min) && year <= (yearSlotMeta === null || yearSlotMeta === void 0 ? void 0 : yearSlotMeta.max));
+    const isTimeCompleted = [hours, minutes, ...(mode === constants_1.MODES.DateTime || mode === constants_1.TIME_MODES.FullTime ? [seconds] : [])].every(value => value !== undefined);
+    if (mode === constants_1.MODES.DateTime || mode === constants_1.NO_SECONDS_MODE) {
+      isCompleted = isDateCompleted && isTimeCompleted;
+    } else if (mode === constants_1.TIME_MODES.FullTime || mode === constants_1.TIME_MODES.NoSeconds) {
+      isCompleted = isTimeCompleted;
+    } else {
+      isCompleted = isDateCompleted;
+    }
+    if (isCompleted && inputRef.current) {
+      const lastPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length;
+      inputRef.current.selectionStart = lastPosition;
+      inputRef.current.selectionEnd = lastPosition;
+    }
+    return isCompleted;
+  }, [getSlot, inputRef, mode]);
+  const updateSlot = (0, react_1.useCallback)((slotKey, slotValue) => {
+    if (inputRef.current) {
+      const {
+        start,
+        end,
+        max
+      } = constants_1.SLOTS[mode][slotKey];
+      inputRef.current.value = inputRef.current.value.slice(0, start) + slotValue.toString().padStart(max.toString().length, '0') + inputRef.current.value.slice(end);
+      setFocus(slotKey);
+    }
+  }, [inputRef, setFocus, mode]);
+  const getNextSlotKey = (0, react_1.useMemo)(() => (0, dateFields_1.getNextSlotKeyHandler)(mode), [mode]);
+  const getPrevSlotKey = (0, react_1.useMemo)(() => (0, dateFields_1.getPrevSlotKeyHandler)(mode), [mode]);
+  const getSlotKeyFromIndex = (0, react_1.useMemo)(() => (0, dateFields_1.getSlotKeyFromIndexHandler)(mode), [mode]);
+  return {
+    isAllSelected,
+    isValidInput,
+    tryToCompleteInput,
+    getSlot,
+    updateSlot,
+    setFocus,
+    isLikeDate,
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex
+  };
+}

package/dist/cjs/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from './dateHandlers';
 export * from './useCopyButton';
 export * from './useHideButton';
 export * from './usePostfix';

package/dist/cjs/hooks/index.js

@@ -22,6 +22,7 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+__exportStar(require("./dateHandlers"), exports);
 __exportStar(require("./useCopyButton"), exports);
 __exportStar(require("./useHideButton"), exports);
 __exportStar(require("./usePostfix"), exports);

package/dist/cjs/hooks/useCopyButton.js

@@ -26,7 +26,7 @@ function useCopyButton(_ref) {
     show: showCopyButton,
     render: props => (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonCopyValue, Object.assign({}, props, {
       size: input_private_1.BUTTON_SIZE_MAP[size],
-      valueToCopy: prefix + valueToCopy + postfix,
+      valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''),
       onValueRequest: onValueRequest,
       disabled: disabled
     }))

package/dist/cjs/{types.d.ts → types/allFields.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
-import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from '../constants';
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
 export type ButtonVariant = ValueOf<typeof BUTTON_VARIANT>;

package/dist/cjs/types/dateFields.d.ts

@@ -0,0 +1,11 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MODES, NO_SECONDS_MODE, TIME_MODES } from '../constants';
+export type Slot = {
+    start: number;
+    end: number;
+    max: number;
+    min: number;
+};
+export type Mode = ValueOf<typeof MODES>;
+export type TimeMode = ValueOf<typeof TIME_MODES>;
+export type NoSecondsMode = typeof NO_SECONDS_MODE;

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/dist/cjs/types/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./allFields"), exports);
+__exportStar(require("./dateFields"), exports);

package/dist/cjs/utils/dateFields.d.ts

@@ -0,0 +1,10 @@
+import { SlotKey } from '../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../types';
+export declare function getSlotKeyFromIndexHandler(mode: Mode | TimeMode | NoSecondsMode): (index: number | null) => SlotKey | undefined;
+export declare function getNextSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode): (slotKey: SlotKey | undefined) => SlotKey;
+export declare function getPrevSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode): (slotKey: SlotKey | undefined) => SlotKey;
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export declare function parseDate(value: string): Date | undefined;

package/dist/cjs/utils/dateFields.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSlotKeyFromIndexHandler = getSlotKeyFromIndexHandler;
+exports.getNextSlotKeyHandler = getNextSlotKeyHandler;
+exports.getPrevSlotKeyHandler = getPrevSlotKeyHandler;
+exports.parseDate = parseDate;
+const constants_1 = require("../constants");
+function getSlotKeyFromIndexHandler(mode) {
+  return index => {
+    if (index !== null) {
+      for (const key in constants_1.SLOTS[mode]) {
+        if (index >= constants_1.SLOTS[mode][key].start && index <= constants_1.SLOTS[mode][key].end) {
+          return key;
+        }
+      }
+    }
+    return undefined;
+  };
+}
+function getNextSlotKeyHandler(mode) {
+  const order = constants_1.SLOT_ORDER[mode];
+  return slotKey => {
+    const defaultIndex = order.length - 1;
+    const defaultSLot = order[defaultIndex];
+    const currentIndex = order.indexOf(slotKey);
+    return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex + 1];
+  };
+}
+function getPrevSlotKeyHandler(mode) {
+  const order = constants_1.SLOT_ORDER[mode];
+  return slotKey => {
+    const defaultIndex = 0;
+    const defaultSLot = order[defaultIndex];
+    const currentIndex = order.indexOf(slotKey);
+    return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex - 1];
+  };
+}
+const DATE_STUB = new Date();
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+function parseDate(value) {
+  if (!value) {
+    return undefined;
+  }
+  const splittedValue = value.split(', ');
+  const date = splittedValue[0];
+  let time = splittedValue[1];
+  let [day, month, year] = date.split('.').map(Number);
+  month -= 1;
+  if (date.includes(':')) {
+    time = date;
+  }
+  if (time) {
+    if (isNaN(year) || isNaN(month) || isNaN(day)) {
+      year = DATE_STUB.getFullYear();
+      month = DATE_STUB.getMonth();
+      day = DATE_STUB.getDay();
+    }
+    const [hours = 0, minutes = 0, seconds = 0] = time.split(':').map(str => {
+      var _a;
+      return (_a = Number(str)) !== null && _a !== void 0 ? _a : 0;
+    });
+    return new Date(year, month, day, hours, minutes, seconds);
+  }
+  return new Date(year, month, day);
+}

package/dist/esm/components/FieldDate/FieldDate.d.ts

@@ -1,16 +1,24 @@
 import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { MODES } from '../../constants';
+import { Mode } from '../../types';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+type FieldDateWithSeconds = {
+    mode: typeof MODES.DateTime;
+    showSeconds?: boolean;
+};
 type FieldDateOwnProps = {
     /** Открыт date-picker */
     open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
+    /** Значение поля */
+    value?: Date;
     /** Колбек смены значения */
-    onChange?(value: string): void;
+    onChange?(value: Date | undefined): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -18,27 +26,10 @@ type FieldDateOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
-    /** Текущая локаль календаря */
-    locale?: Intl.Locale;
-} & Pick<CalendarProps, 'buildCellProps'>;
+    mode: Mode;
+} & Pick<CalendarProps, 'buildCellProps'> & ({
+    mode: typeof MODES.Date;
+} | FieldDateWithSeconds);
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
-export declare const FieldDate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string;
-} & import("react").AriaAttributes & {
-    /** Открыт date-picker */
-    open?: boolean;
-    /** Колбек открытия пикера */
-    onOpenChange?(value: boolean): void;
-    /** Колбек смены значения */
-    onChange?(value: string): void;
-    /** Отображение кнопки копирования */
-    showCopyButton?: boolean;
-    /**
-     * Отображение кнопки Очистки поля
-     * @default true
-     */
-    showClearButton?: boolean;
-    /** Текущая локаль календаря */
-    locale?: Intl.Locale;
-} & Pick<CalendarProps, "buildCellProps"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FieldDate: import("react").ForwardRefExoticComponent<FieldDateProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};