@snack-uikit/fields 0.31.0 → 0.32.0

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

@@ -1,9 +1,10 @@
+export * from './FieldColor';
+export * from './FieldDate';
 export * from './FieldDecorator';
-export * from './FieldText';
-export * from './FieldTextArea';
 export * from './FieldSecure';
-export * from './FieldDate';
 export * from './FieldSelect';
-export * from './FieldStepper';
 export * from './FieldSlider';
-export * from './FieldColor';
+export * from './FieldStepper';
+export * from './FieldText';
+export * from './FieldTextArea';
+export * from './FieldTime';

package/dist/cjs/components/index.js

@@ -22,12 +22,13 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+__exportStar(require("./FieldColor"), exports);
+__exportStar(require("./FieldDate"), exports);
 __exportStar(require("./FieldDecorator"), exports);
-__exportStar(require("./FieldText"), exports);
-__exportStar(require("./FieldTextArea"), exports);
 __exportStar(require("./FieldSecure"), exports);
-__exportStar(require("./FieldDate"), exports);
 __exportStar(require("./FieldSelect"), exports);
-__exportStar(require("./FieldStepper"), exports);
 __exportStar(require("./FieldSlider"), exports);
-__exportStar(require("./FieldColor"), exports);
+__exportStar(require("./FieldStepper"), exports);
+__exportStar(require("./FieldText"), exports);
+__exportStar(require("./FieldTextArea"), exports);
+__exportStar(require("./FieldTime"), exports);

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

@@ -0,0 +1,24 @@
+import { Mode, NoSecondsMode, Slot, TimeMode } from '../types';
+export declare enum SlotKey {
+    Day = "D",
+    Month = "M",
+    Year = "Y",
+    Hours = "h",
+    Minutes = "m",
+    Seconds = "s"
+}
+export declare const MODES: {
+    readonly Date: "date";
+    readonly DateTime: "date-time";
+};
+export declare const TIME_MODES: {
+    readonly FullTime: "full-time";
+    readonly NoSeconds: "no-seconds";
+};
+export declare const NO_SECONDS_MODE = "date-time-no-sec";
+export declare const MASK: Record<Mode | TimeMode | NoSecondsMode, Record<string, string>>;
+export declare const DEFAULT_LOCALE: Intl.Locale;
+export declare const SLOTS: Record<Mode | TimeMode | NoSecondsMode, Record<SlotKey | string, Slot>>;
+export type FocusSlot = SlotKey | 'auto';
+export declare const SLOT_ORDER: Record<Mode | TimeMode | NoSecondsMode, SlotKey[]>;
+export declare const SLOTS_PLACEHOLDER: Record<Mode | TimeMode | NoSecondsMode, Record<string, Partial<Record<SlotKey, string>>>>;

package/dist/cjs/constants/dateFields.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SLOTS_PLACEHOLDER = exports.SLOT_ORDER = exports.SLOTS = exports.DEFAULT_LOCALE = exports.MASK = exports.NO_SECONDS_MODE = exports.TIME_MODES = exports.MODES = exports.SlotKey = void 0;
+var SlotKey;
+(function (SlotKey) {
+  SlotKey["Day"] = "D";
+  SlotKey["Month"] = "M";
+  SlotKey["Year"] = "Y";
+  SlotKey["Hours"] = "h";
+  SlotKey["Minutes"] = "m";
+  SlotKey["Seconds"] = "s";
+})(SlotKey || (exports.SlotKey = SlotKey = {}));
+exports.MODES = {
+  Date: 'date',
+  DateTime: 'date-time'
+};
+exports.TIME_MODES = {
+  FullTime: 'full-time',
+  NoSeconds: 'no-seconds'
+};
+exports.NO_SECONDS_MODE = 'date-time-no-sec';
+exports.MASK = {
+  [exports.MODES.Date]: {
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY'
+  },
+  [exports.MODES.DateTime]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+    'en-US': 'DD.MM.YYYY, hh:mm:ss'
+  },
+  [exports.NO_SECONDS_MODE]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм',
+    'en-US': 'DD.MM.YYYY, hh:mm'
+  },
+  [exports.TIME_MODES.FullTime]: {
+    'ru-RU': 'чч:мм:сс',
+    'en-US': 'hh:mm:ss'
+  },
+  [exports.TIME_MODES.NoSeconds]: {
+    'ru-RU': 'чч:мм',
+    'en-US': 'hh:mm'
+  }
+};
+exports.DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+const DATE_SLOTS = {
+  [SlotKey.Day]: {
+    start: 0,
+    end: 2,
+    max: 31,
+    min: 1
+  },
+  [SlotKey.Month]: {
+    start: 3,
+    end: 5,
+    max: 12,
+    min: 1
+  },
+  [SlotKey.Year]: {
+    start: 6,
+    end: 10,
+    max: 2100,
+    min: 1900
+  }
+};
+const TIME_SLOTS = (shift, showSeconds) => Object.assign({
+  [SlotKey.Hours]: {
+    start: shift,
+    end: shift + 2,
+    max: 23,
+    min: 0
+  },
+  [SlotKey.Minutes]: {
+    start: shift + 3,
+    end: shift + 5,
+    max: 59,
+    min: 0
+  }
+}, showSeconds ? {
+  [SlotKey.Seconds]: {
+    start: shift + 6,
+    end: shift + 8,
+    max: 59,
+    min: 0
+  }
+} : {});
+exports.SLOTS = {
+  [exports.MODES.Date]: DATE_SLOTS,
+  [exports.MODES.DateTime]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, true)),
+  [exports.NO_SECONDS_MODE]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, false)),
+  [exports.TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+  [exports.TIME_MODES.NoSeconds]: TIME_SLOTS(0, false)
+};
+exports.SLOT_ORDER = {
+  [exports.MODES.Date]: [SlotKey.Day, SlotKey.Month, SlotKey.Year],
+  [exports.MODES.DateTime]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [exports.NO_SECONDS_MODE]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes],
+  [exports.TIME_MODES.FullTime]: [SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [exports.TIME_MODES.NoSeconds]: [SlotKey.Hours, SlotKey.Minutes]
+};
+const RU_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'ДД',
+  [SlotKey.Month]: 'ММ',
+  [SlotKey.Year]: 'ГГГГ'
+};
+const RU_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'чч',
+  [SlotKey.Minutes]: 'мм',
+  [SlotKey.Seconds]: 'сс'
+};
+const EN_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'DD',
+  [SlotKey.Month]: 'MM',
+  [SlotKey.Year]: 'YYYY'
+};
+const EN_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'hh',
+  [SlotKey.Minutes]: 'mm',
+  [SlotKey.Seconds]: 'ss'
+};
+exports.SLOTS_PLACEHOLDER = {
+  [exports.MODES.Date]: {
+    'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+    'en-US': EN_DATE_SLOTS_PLACEHOLDER
+  },
+  [exports.MODES.DateTime]: {
+    'ru-RU': Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER),
+    'en-US': Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), EN_TIME_SLOTS_PLACEHOLDER)
+  },
+  [exports.NO_SECONDS_MODE]: {
+    'ru-RU': Object.assign(Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER), {
+      [SlotKey.Seconds]: undefined
+    }),
+    'en-US': Object.assign(Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), EN_TIME_SLOTS_PLACEHOLDER), {
+      [SlotKey.Seconds]: undefined
+    })
+  },
+  [exports.TIME_MODES.FullTime]: {
+    'ru-RU': RU_TIME_SLOTS_PLACEHOLDER,
+    'en-US': EN_TIME_SLOTS_PLACEHOLDER
+  },
+  [exports.TIME_MODES.NoSeconds]: {
+    'ru-RU': Object.assign(Object.assign({}, RU_TIME_SLOTS_PLACEHOLDER), {
+      [SlotKey.Seconds]: undefined
+    }),
+    'en-US': Object.assign(Object.assign({}, EN_TIME_SLOTS_PLACEHOLDER), {
+      [SlotKey.Seconds]: undefined
+    })
+  }
+};

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

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

package/dist/cjs/constants/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/hooks/dateHandlers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDateField';
+export * from './useFocusHandlers';
+export * from './useHandlers';

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

@@ -0,0 +1,27 @@
+"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("./useDateField"), exports);
+__exportStar(require("./useFocusHandlers"), exports);
+__exportStar(require("./useHandlers"), exports);

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

@@ -1,14 +1,22 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject } from 'react';
-import { SlotKey } from '../constants';
-type UseDateFieldProps = {
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { FocusSlot } from '../../constants';
+import { Mode, TimeMode } from '../../types';
+type BaseProps = {
     inputRef: RefObject<HTMLInputElement>;
-    onChange?(value: string): void;
     readonly?: boolean;
     locale?: Intl.Locale;
     setIsOpen(v: boolean): void;
+    showSeconds?: boolean;
 };
-type FocusSlot = SlotKey.Day | SlotKey.Year | 'auto';
-export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen }: UseDateFieldProps): {
+type UseDateFieldProps = ({
+    mode: Mode;
+    onChange?(value: Date | undefined): void;
+} & BaseProps) | ({
+    mode: TimeMode;
+    onChange?: TimePickerProps['onChangeValue'];
+} & BaseProps);
+export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen, mode, showSeconds, }: UseDateFieldProps): {
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void;
     handleClick: () => void;

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>;