@snack-uikit/fields 0.30.0 → 0.32.0

package/dist/esm/components/FieldDate/FieldDate.js

@@ -11,33 +11,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { CalendarSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { CONTAINER_VARIANT, DEFAULT_LOCALE, SlotKey, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useCopyButton } from '../../hooks';
+import { useCopyButton, useDateField, useFocusHandlers, useHandlers } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
-import { DEFAULT_LOCALE, SlotKey } from './constants';
-import { useDateField } from './hooks';
-import { useFocusHandlers } from './hooks/useFocusHandlers';
-import { useHandlers } from './hooks/useHandlers';
 import styles from './styles.module.css';
-import { parseDate } from './utils';
-const CALENDAR_SIZE_MAP = {
-    [SIZE.S]: 's',
-    [SIZE.M]: 'm',
-    [SIZE.L]: 'm',
-};
 export const FieldDate = 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, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE, buildCellProps, 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", "size", "validationState", "locale", "buildCellProps", "error"]);
+    var _b;
+    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, size = SIZE.S, validationState = VALIDATION_STATE.Default, buildCellProps, 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", "buildCellProps", "error", "mode"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
-    const [pickerAutofocus, setPickerAutofocus] = useState(false);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
@@ -46,16 +36,18 @@ export const FieldDate = 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 = getValidationState({ validationState, error });
+    const navigationStartRef = useRef(null);
     const checkForLeavingFocus = 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 = 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 = '';
         }
@@ -68,8 +60,24 @@ export const FieldDate = forwardRef((_a, ref) => {
             setIsOpen(false);
         }
     }, [onChange, required, setIsOpen]);
+    const getStringDateValue = useCallback((date) => {
+        if (!date)
+            return '';
+        if (mode === 'date') {
+            return date.toLocaleDateString(DEFAULT_LOCALE);
+        }
+        return date.toLocaleString(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 = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: valueProp || '' });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
     const calendarIcon = useMemo(() => ({
         active: false,
         show: true,
@@ -81,10 +89,12 @@ export const FieldDate = forwardRef((_a, ref) => {
         inputRef: localRef,
         onChange,
         readonly,
-        locale,
+        locale: DEFAULT_LOCALE,
         setIsOpen,
+        mode,
+        showSeconds,
     });
-    const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Year), [setInputFocus]);
+    const setInputFocusFromButtons = useCallback(() => setInputFocus(mode === 'date' ? SlotKey.Year : SlotKey.Seconds), [mode, setInputFocus]);
     const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
         setInputFocus: setInputFocusFromButtons,
         inputRef: localRef,
@@ -93,12 +103,14 @@ export const FieldDate = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    // TODO: do not hardcode locale here
     const handleSelectDate = (date) => {
         var _a;
-        onChange && onChange(date.toLocaleDateString(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();
@@ -120,11 +132,12 @@ export const FieldDate = forwardRef((_a, ref) => {
             (_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
     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 = useCallback((e) => {
         setInputFocus();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -146,10 +159,5 @@ export const FieldDate = forwardRef((_a, ref) => {
             : {
                 open: showDropList,
                 onOpenChange: setIsOpen,
-            }), { content: _jsx("div", { className: styles.calendarWrapper, "data-size": size, children: _jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: element => {
-                        if (pickerAutofocus) {
-                            element === null || element === void 0 ? void 0 : element.focus();
-                            setPickerAutofocus(false);
-                        }
-                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(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-date__input' }) }) })) })));
+            }), { content: _jsx("div", { className: styles.calendarWrapper, "data-size": size, children: _jsx(Calendar, { mode: mode, size: size, value: valueProp, showSeconds: showSeconds, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, locale: DEFAULT_LOCALE, "data-test-id": 'field-date__calendar', fitToContainer: false }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(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-date__input' }) }) })) })));
 });

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

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

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

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

package/dist/esm/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/esm/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/esm/components/FieldSelect/hooks.js

@@ -52,15 +52,21 @@ export function useButtons({ readonly, showClearButton, showCopyButton, size, on
     return { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs };
 }
 export function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, resetSearchOnOptionSelection = true, }) {
-    const [inputValue = '', setInputValue] = useValueControl({ value, onChange, defaultValue });
+    const [inputValue = '', setInputValueState] = useValueControl({ value, onChange, defaultValue });
     const prevInputValue = useRef(inputValue);
     const updateInputValue = 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 = useCallback((value) => {
+        const updatedValue = prevInputValue.current && value.includes(prevInputValue.current)
+            ? value.replace(prevInputValue.current, '')
+            : value;
+        setInputValueState(updatedValue);
+    }, [setInputValueState]);
     return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };
 }
 export function useHandleDeleteItem(setValue) {

package/dist/esm/components/FieldSelect/styles.module.css

@@ -72,12 +72,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
 }
@@ -95,12 +91,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
 }
@@ -118,12 +110,8 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          ));
-  margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
-          );
+  width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);
 }

package/dist/esm/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/esm/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/esm/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/esm/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/esm/components/FieldTime/FieldTime.js

@@ -0,0 +1,161 @@
+var __rest = (this && this.__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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { TimePicker } from '@snack-uikit/calendar';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { WatchSVG } from '@snack-uikit/icons';
+import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CONTAINER_VARIANT, DEFAULT_LOCALE, SlotKey, TIME_MODES, VALIDATION_STATE } from '../../constants';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { useCopyButton, useDateField, useFocusHandlers, useHandlers } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
+import { FieldDecorator } from '../FieldDecorator';
+import styles from './styles.module.css';
+const getStringTimeValue = (time, { showSeconds, locale }) => {
+    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,
+    });
+};
+export const FieldTime = 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 = SIZE.S, validationState = 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] = useUncontrolledProp(open, false, onOpenChange);
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : 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 = getValidationState({ validationState, error });
+    const navigationStartRef = useRef(null);
+    const checkForLeavingFocus = 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 = 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: DEFAULT_LOCALE });
+    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
+    const calendarIcon = useMemo(() => ({
+        active: false,
+        show: true,
+        id: 'watchIcon',
+        render: props => (_jsx(WatchSVG, Object.assign({}, props, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size }))),
+    }), [calendarIconSize, size]);
+    const memorizedButtons = useMemo(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
+    const { value, handleChange, handleClick: timeInputClickHandler, handleKeyDown: timeInputKeyDownHandler, handleBlur: timeInputBlurHandler, mask, setInputFocus, } = useDateField({
+        inputRef: localRef,
+        onChange,
+        readonly,
+        locale: DEFAULT_LOCALE,
+        setIsOpen,
+        mode: showSeconds ? TIME_MODES.FullTime : TIME_MODES.NoSeconds,
+        showSeconds,
+    });
+    const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Seconds), [setInputFocus]);
+    const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = 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: 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
+        runAfterRerender(() => {
+            setInputFocus(SlotKey.Hours);
+            setIsOpen(false);
+        });
+    };
+    const handleInputKeyDown = useHandlers([
+        checkForLeavingFocus,
+        timeInputKeyDownHandler,
+        navigationInputKeyDownHandler,
+    ]);
+    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
+    useEffect(() => {
+        if (localRef.current && document.activeElement !== localRef.current) {
+            localRef.current.value = getStringTimeValue(valueProp, { showSeconds, locale: DEFAULT_LOCALE });
+        }
+    }, [showSeconds, valueProp]);
+    const onFocusByKeyboard = useCallback((e) => {
+        setInputFocus();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus, setInputFocus]);
+    const inputHandlers = useFocusHandlers({
+        onFocusByClick: onFocus,
+        onFocusByKeyboard,
+    });
+    const onBlur = useHandlers([timeInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+    const onClick = useCallback((e) => {
+        timeInputClickHandler();
+        if (isOpen) {
+            // stop the event because want picker to stay opened
+            e.stopPropagation();
+        }
+    }, [timeInputClickHandler, isOpen]);
+    return (_jsx(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 }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'auto' }, (readonly || disabled
+            ? { open: false }
+            : {
+                open: showDropList,
+                onOpenChange: setIsOpen,
+            }), { content: _jsx(TimePicker, { size: size, value: valueProp, onChangeValue: handleSelectTime, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, "data-test-id": 'field-time__timepicker', fitToContainer: false, showSeconds: showSeconds }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(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/esm/components/FieldTime/index.d.ts

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

package/dist/esm/components/FieldTime/index.js

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

package/dist/esm/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/esm/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/esm/components/index.js

@@ -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/esm/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>>>>;