@snack-uikit/fields 0.31.0 → 0.32.0

package/dist/cjs/components/FieldDate/FieldDate.js

@@ -31,18 +31,9 @@ const helperComponents_1 = require("../../helperComponents");
 const hooks_1 = require("../../hooks");
 const getValidationState_1 = require("../../utils/getValidationState");
 const FieldDecorator_1 = require("../FieldDecorator");
-const constants_2 = require("./constants");
-const hooks_2 = require("./hooks");
-const useFocusHandlers_1 = require("./hooks/useFocusHandlers");
-const useHandlers_1 = require("./hooks/useHandlers");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-const utils_2 = require("./utils");
-const CALENDAR_SIZE_MAP = {
-  [input_private_1.SIZE.S]: 's',
-  [input_private_1.SIZE.M]: 'm',
-  [input_private_1.SIZE.L]: 'm'
-};
 exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
+  var _b;
   var {
       id,
       name,
@@ -66,13 +57,12 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
       showHintIcon,
       size = input_private_1.SIZE.S,
       validationState = constants_1.VALIDATION_STATE.Default,
-      locale = constants_2.DEFAULT_LOCALE,
       buildCellProps,
-      error
+      error,
+      mode
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error"]);
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode"]);
   const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
-  const [pickerAutofocus, setPickerAutofocus] = (0, react_1.useState)(false);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
@@ -81,19 +71,24 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
   const showAdditionalButton = Boolean(valueProp && !disabled);
   const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
   const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+  const showSeconds = mode === 'date-time' ? (_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true : undefined;
   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') {
-      setPickerAutofocus(true);
       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('');
+    onChange && onChange(undefined);
     if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
       localRef.current.value = '';
     }
@@ -105,6 +100,21 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
       setIsOpen(false);
     }
   }, [onChange, required, setIsOpen]);
+  const getStringDateValue = (0, react_1.useCallback)(date => {
+    if (!date) return '';
+    if (mode === 'date') {
+      return date.toLocaleDateString(constants_1.DEFAULT_LOCALE);
+    }
+    return date.toLocaleString(constants_1.DEFAULT_LOCALE, {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: showSeconds ? '2-digit' : undefined
+    });
+  }, [mode, showSeconds]);
+  const valueToCopy = getStringDateValue(valueProp);
   const clearButtonSettings = (0, input_private_1.useClearButton)({
     clearButtonRef,
     showClearButton,
@@ -115,7 +125,7 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
     copyButtonRef,
     showCopyButton,
     size,
-    valueToCopy: valueProp || ''
+    valueToCopy
   });
   const calendarIcon = (0, react_1.useMemo)(() => ({
     active: false,
@@ -136,14 +146,16 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
     handleBlur: dateInputBlurHandler,
     mask,
     setInputFocus
-  } = (0, hooks_2.useDateField)({
+  } = (0, hooks_1.useDateField)({
     inputRef: localRef,
     onChange,
     readonly,
-    locale,
-    setIsOpen
+    locale: constants_1.DEFAULT_LOCALE,
+    setIsOpen,
+    mode,
+    showSeconds
   });
-  const setInputFocusFromButtons = (0, react_1.useCallback)(() => setInputFocus(constants_2.SlotKey.Year), [setInputFocus]);
+  const setInputFocusFromButtons = (0, react_1.useCallback)(() => setInputFocus(mode === 'date' ? constants_1.SlotKey.Year : constants_1.SlotKey.Seconds), [mode, setInputFocus]);
   const {
     postfixButtons,
     inputTabIndex,
@@ -157,43 +169,46 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
     readonly,
     submitKeys: ['Enter', 'Space', 'Tab']
   });
-  // TODO: do not hardcode locale here
   const handleSelectDate = date => {
     var _a;
-    onChange && onChange(date.toLocaleDateString(constants_2.DEFAULT_LOCALE));
+    onChange && onChange(date);
     (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     setIsOpen(false);
+    if (localRef.current) {
+      localRef.current.value = getStringDateValue(date);
+    }
   };
   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_2.SlotKey.Day);
+      setInputFocus(constants_1.SlotKey.Day);
       setIsOpen(false);
     });
   };
-  const handleInputKeyDown = (0, useHandlers_1.useHandlers)([checkForLeavingFocus, dateInputKeyDownHandler, navigationInputKeyDownHandler]);
+  const handleInputKeyDown = (0, hooks_1.useHandlers)([checkForLeavingFocus, dateInputKeyDownHandler, 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) {
-      localRef.current.value = valueProp;
+    if (localRef.current && document.activeElement !== localRef.current) {
+      localRef.current.value = getStringDateValue(valueProp);
     }
-  }, [valueProp]);
+  }, [getStringDateValue, valueProp]);
   const onFocusByKeyboard = (0, react_1.useCallback)(e => {
     setInputFocus();
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus, setInputFocus]);
-  const inputHandlers = (0, useFocusHandlers_1.useFocusHandlers)({
+  const inputHandlers = (0, hooks_1.useFocusHandlers)({
     onFocusByClick: onFocus,
     onFocusByKeyboard
   });
-  const onBlur = (0, useHandlers_1.useHandlers)([dateInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+  const onBlur = (0, hooks_1.useHandlers)([dateInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
   const onClick = (0, react_1.useCallback)(e => {
     dateInputClickHandler();
     if (isOpen) {
@@ -231,20 +246,17 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
         className: styles_module_scss_1.default.calendarWrapper,
         "data-size": size,
         children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
-          mode: 'date',
-          size: CALENDAR_SIZE_MAP[size],
-          value: valueProp ? (0, utils_2.parseDate)(valueProp) : undefined,
+          mode: mode,
+          size: size,
+          value: valueProp,
+          showSeconds: showSeconds,
           onChangeValue: handleSelectDate,
           buildCellProps: buildCellProps,
-          navigationStartRef: element => {
-            if (pickerAutofocus) {
-              element === null || element === void 0 ? void 0 : element.focus();
-              setPickerAutofocus(false);
-            }
-          },
+          navigationStartRef: navigationStartRef,
           onFocusLeave: handleCalendarFocusLeave,
-          locale: locale,
-          "data-test-id": 'field-date__calendar'
+          locale: constants_1.DEFAULT_LOCALE,
+          "data-test-id": 'field-date__calendar',
+          fitToContainer: false
         })
       }),
       children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {

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

@@ -1,2 +1 @@
 export * from './FieldDate';
-export { parseDate } from './utils';

package/dist/cjs/components/FieldDate/index.js

@@ -22,12 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseDate = void 0;
-__exportStar(require("./FieldDate"), exports);
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "parseDate", {
-  enumerable: true,
-  get: function () {
-    return utils_1.parseDate;
-  }
-});
+__exportStar(require("./FieldDate"), exports);

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

@@ -21,5 +21,5 @@ type FieldSecureOwnProps = {
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/cjs/components/FieldSelect/hooks.d.ts

@@ -27,9 +27,9 @@ export declare function useSearchInput({ value, onChange, defaultValue, selected
     resetSearchOnOptionSelection?: boolean;
 }): {
     inputValue: string;
-    setInputValue: (value: any, ...args: any[]) => ReturnType<Handler> | void;
+    setInputValue: (value: string) => void;
     prevInputValue: import("react").MutableRefObject<string>;
-    onInputValueChange: (value: any, ...args: any[]) => ReturnType<Handler> | void;
+    onInputValueChange: (value: string) => void;
     updateInputValue: (selectedItem?: ItemWithId) => void;
 };
 export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => (e?: MouseEvent<HTMLButtonElement>) => void;

package/dist/cjs/components/FieldSelect/hooks.js

@@ -94,7 +94,7 @@ function useSearchInput(_ref3) {
     selectedOptionFormatter,
     resetSearchOnOptionSelection = true
   } = _ref3;
-  const [inputValue = '', setInputValue] = (0, hooks_1.useValueControl)({
+  const [inputValue = '', setInputValueState] = (0, hooks_1.useValueControl)({
     value,
     onChange,
     defaultValue
@@ -103,10 +103,14 @@ function useSearchInput(_ref3) {
   const updateInputValue = (0, react_1.useCallback)(selectedItem => {
     const newInputValue = selectedOptionFormatter(selectedItem);
     if (resetSearchOnOptionSelection && (inputValue !== newInputValue || prevInputValue.current !== newInputValue)) {
-      setInputValue(newInputValue);
+      setInputValueState(newInputValue);
       prevInputValue.current = newInputValue;
     }
-  }, [inputValue, resetSearchOnOptionSelection, selectedOptionFormatter, setInputValue]);
+  }, [inputValue, resetSearchOnOptionSelection, selectedOptionFormatter, setInputValueState]);
+  const setInputValue = (0, react_1.useCallback)(value => {
+    const updatedValue = prevInputValue.current && value.includes(prevInputValue.current) ? value.replace(prevInputValue.current, '') : value;
+    setInputValueState(updatedValue);
+  }, [setInputValueState]);
   return {
     inputValue,
     setInputValue,

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

@@ -23,5 +23,5 @@ type FieldSliderOwnProps = {
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
 export declare const FieldSlider: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSliderOwnProps & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name"> & Pick<SliderComponentProps, "value" | "onChange" | "range" | "tipFormatter"> & Required<Pick<SliderComponentProps, "max" | "min" | "step" | "marks">> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSliderOwnProps & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly"> & Pick<SliderComponentProps, "value" | "onChange" | "range" | "tipFormatter"> & Required<Pick<SliderComponentProps, "max" | "min" | "step" | "marks">> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -27,5 +27,5 @@ type FieldTextOwnProps = {
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -26,5 +26,5 @@ type FieldTextAreaOwnProps = {
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -0,0 +1,30 @@
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { FieldDecoratorProps } from '../FieldDecorator';
+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 FieldTimeOwnProps = {
+    /** Открыт time-picker */
+    open?: boolean;
+    /** Колбек открытия пикера */
+    onOpenChange?(value: boolean): void;
+    /** Значение поля */
+    value?: TimePickerProps['value'];
+    /** Колбек смены значения */
+    onChange?: TimePickerProps['onChangeValue'];
+    /** Отображение кнопки копирования */
+    showCopyButton?: boolean;
+    /** Показывать ли секунды */
+    showSeconds?: boolean;
+    /**
+     * Отображение кнопки Очистки поля
+     * @default true
+     */
+    showClearButton?: boolean;
+};
+export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
+export declare const FieldTime: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & FieldTimeOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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);
+}