@snack-uikit/fields 0.30.0 → 0.32.0

package/dist/cjs/components/FieldTime/FieldTime.js

@@ -0,0 +1,298 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldTime = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const calendar_1 = require("@snack-uikit/calendar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const icons_1 = require("@snack-uikit/icons");
+const input_private_1 = require("@snack-uikit/input-private");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const hooks_1 = require("../../hooks");
+const getValidationState_1 = require("../../utils/getValidationState");
+const FieldDecorator_1 = require("../FieldDecorator");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const getStringTimeValue = (time, _ref) => {
+  let {
+    showSeconds,
+    locale
+  } = _ref;
+  var _a, _b, _c;
+  if (!time) {
+    return '';
+  }
+  const date = new Date();
+  date.setHours((_a = time.hours) !== null && _a !== void 0 ? _a : 0);
+  date.setMinutes((_b = time.minutes) !== null && _b !== void 0 ? _b : 0);
+  date.setSeconds((_c = time.seconds) !== null && _c !== void 0 ? _c : 0);
+  return date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: showSeconds ? 'numeric' : undefined
+  });
+};
+exports.FieldTime = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      id,
+      name,
+      value: valueProp,
+      disabled = false,
+      readonly = false,
+      showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
+      open,
+      onOpenChange,
+      onChange,
+      onFocus,
+      onBlur: onBlurProp,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      caption,
+      hint,
+      showHintIcon,
+      showSeconds = true,
+      size = input_private_1.SIZE.S,
+      validationState = constants_1.VALIDATION_STATE.Default,
+      error
+    } = _a,
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error"]);
+  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
+  const localRef = (0, react_1.useRef)(null);
+  const clearButtonRef = (0, react_1.useRef)(null);
+  const copyButtonRef = (0, react_1.useRef)(null);
+  const calendarIconSize = size === input_private_1.SIZE.S ? input_private_1.ICON_SIZE.Xs : input_private_1.ICON_SIZE.S;
+  const showDropList = isOpen && !readonly && !disabled;
+  const showAdditionalButton = Boolean(valueProp && !disabled);
+  const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
+  const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+  const fieldValidationState = (0, getValidationState_1.getValidationState)({
+    validationState,
+    error
+  });
+  const navigationStartRef = (0, react_1.useRef)(null);
+  const checkForLeavingFocus = (0, react_1.useCallback)(event => {
+    if (event.key === 'ArrowDown') {
+      setIsOpen(true);
+      setTimeout(() => {
+        var _a;
+        return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, [setIsOpen]);
+  const handleClear = (0, react_1.useCallback)(() => {
+    var _a, _b, _c;
+    onChange && onChange(undefined);
+    if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+      localRef.current.value = '';
+    }
+    if (required) {
+      (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      setIsOpen(true);
+    } else {
+      (_c = localRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+      setIsOpen(false);
+    }
+  }, [onChange, required, setIsOpen]);
+  const valueToCopy = getStringTimeValue(valueProp, {
+    showSeconds,
+    locale: constants_1.DEFAULT_LOCALE
+  });
+  const clearButtonSettings = (0, input_private_1.useClearButton)({
+    clearButtonRef,
+    showClearButton,
+    size,
+    onClear: handleClear
+  });
+  const copyButtonSettings = (0, hooks_1.useCopyButton)({
+    copyButtonRef,
+    showCopyButton,
+    size,
+    valueToCopy
+  });
+  const calendarIcon = (0, react_1.useMemo)(() => ({
+    active: false,
+    show: true,
+    id: 'watchIcon',
+    render: props => (0, jsx_runtime_1.jsx)(icons_1.WatchSVG, Object.assign({}, props, {
+      size: calendarIconSize,
+      className: styles_module_scss_1.default.calendarIcon,
+      "data-size": size
+    }))
+  }), [calendarIconSize, size]);
+  const memorizedButtons = (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
+  const {
+    value,
+    handleChange,
+    handleClick: timeInputClickHandler,
+    handleKeyDown: timeInputKeyDownHandler,
+    handleBlur: timeInputBlurHandler,
+    mask,
+    setInputFocus
+  } = (0, hooks_1.useDateField)({
+    inputRef: localRef,
+    onChange,
+    readonly,
+    locale: constants_1.DEFAULT_LOCALE,
+    setIsOpen,
+    mode: showSeconds ? constants_1.TIME_MODES.FullTime : constants_1.TIME_MODES.NoSeconds,
+    showSeconds
+  });
+  const setInputFocusFromButtons = (0, react_1.useCallback)(() => setInputFocus(constants_1.SlotKey.Seconds), [setInputFocus]);
+  const {
+    postfixButtons,
+    inputTabIndex,
+    onInputKeyDown: navigationInputKeyDownHandler,
+    setInitialTabIndices
+  } = (0, input_private_1.useButtonNavigation)({
+    setInputFocus: setInputFocusFromButtons,
+    inputRef: localRef,
+    postfixButtons: memorizedButtons,
+    onButtonKeyDown: checkForLeavingFocus,
+    readonly,
+    submitKeys: ['Enter', 'Space', 'Tab']
+  });
+  const handleSelectTime = time => {
+    var _a;
+    onChange && onChange(time);
+    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setIsOpen(false);
+    if (localRef.current) {
+      localRef.current.value = getStringTimeValue(time, {
+        showSeconds,
+        locale: constants_1.DEFAULT_LOCALE
+      });
+    }
+  };
+  const handleCalendarFocusLeave = () => {
+    setInitialTabIndices();
+    // TODO: find out why it works not as expected (focus is moved to the next element instead of the focused one)
+    // maybe floating-ui causes the problem
+    (0, input_private_1.runAfterRerender)(() => {
+      setInputFocus(constants_1.SlotKey.Hours);
+      setIsOpen(false);
+    });
+  };
+  const handleInputKeyDown = (0, hooks_1.useHandlers)([checkForLeavingFocus, timeInputKeyDownHandler, navigationInputKeyDownHandler]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if (open) {
+      (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [open]);
+  // TODO input ref - determine whether to update ref based on input/non-input state
+  (0, react_1.useEffect)(() => {
+    if (localRef.current && document.activeElement !== localRef.current) {
+      localRef.current.value = getStringTimeValue(valueProp, {
+        showSeconds,
+        locale: constants_1.DEFAULT_LOCALE
+      });
+    }
+  }, [showSeconds, valueProp]);
+  const onFocusByKeyboard = (0, react_1.useCallback)(e => {
+    setInputFocus();
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [onFocus, setInputFocus]);
+  const inputHandlers = (0, hooks_1.useFocusHandlers)({
+    onFocusByClick: onFocus,
+    onFocusByKeyboard
+  });
+  const onBlur = (0, hooks_1.useHandlers)([timeInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+  const onClick = (0, react_1.useCallback)(e => {
+    timeInputClickHandler();
+    if (isOpen) {
+      // stop the event because want picker to stay opened
+      e.stopPropagation();
+    }
+  }, [timeInputClickHandler, isOpen]);
+  return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
+    className: className,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelTooltipPlacement: labelTooltipPlacement,
+    labelFor: id,
+    required: required,
+    caption: caption,
+    hint: hint,
+    disabled: disabled,
+    readonly: readonly,
+    showHintIcon: showHintIcon,
+    size: size,
+    error: error,
+    validationState: fieldValidationState
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({
+      trigger: 'click',
+      triggerClassName: styles_module_scss_1.default.triggerClassName,
+      widthStrategy: 'auto'
+    }, readonly || disabled ? {
+      open: false
+    } : {
+      open: showDropList,
+      onOpenChange: setIsOpen
+    }, {
+      content: (0, jsx_runtime_1.jsx)(calendar_1.TimePicker, {
+        size: size,
+        value: valueProp,
+        onChangeValue: handleSelectTime,
+        navigationStartRef: navigationStartRef,
+        onFocusLeave: handleCalendarFocusLeave,
+        "data-test-id": 'field-time__timepicker',
+        fitToContainer: false,
+        showSeconds: showSeconds
+      }),
+      children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
+        className: styles_module_scss_1.default.container,
+        size: size,
+        validationState: fieldValidationState,
+        disabled: disabled,
+        readonly: readonly,
+        variant: constants_1.CONTAINER_VARIANT.SingleLine,
+        focused: showDropList,
+        inputRef: localRef,
+        postfix: postfixButtons,
+        children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
+          ref: (0, merge_refs_1.default)(ref, localRef),
+          "data-size": size,
+          value: value || '',
+          placeholder: mask,
+          onChange: handleChange,
+          onFocus: inputHandlers.onFocus,
+          onMouseDown: inputHandlers.onMouseDown,
+          onBlur: onBlur,
+          onKeyDown: handleInputKeyDown,
+          onClick: onClick,
+          disabled: disabled,
+          readonly: readonly,
+          tabIndex: inputTabIndex,
+          type: 'text',
+          id: id,
+          name: name,
+          "data-test-id": 'field-time__input'
+        })
+      })
+    }))
+  }));
+});

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

@@ -0,0 +1 @@
+export * from './FieldTime';

package/dist/cjs/components/{FieldDate/hooks → FieldTime}/index.js

@@ -22,4 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./useDateField"), exports);
+__exportStar(require("./FieldTime"), exports);

package/dist/cjs/components/FieldTime/styles.module.css

@@ -0,0 +1,27 @@
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+  display:block;
+  width:100%;
+}
+
+.container .calendarIcon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.container .calendarIcon[data-size=s]{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+.container .calendarIcon[data-size=m]{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.container .calendarIcon[data-size=l]{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.container:hover .calendarIcon, .container:focus-within .calendarIcon, .container[data-focused] .calendarIcon{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.container[data-disabled] .calendarIcon, .container[data-readonly] .calendarIcon{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

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;