@snack-uikit/fields 0.31.0 → 0.32.0

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,18 +36,18 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.0",
-    "@snack-uikit/calendar": "0.10.0",
-    "@snack-uikit/color-picker": "0.3.0",
+    "@snack-uikit/button": "0.19.1",
+    "@snack-uikit/calendar": "0.11.0",
+    "@snack-uikit/color-picker": "0.3.1",
     "@snack-uikit/divider": "3.2.0",
     "@snack-uikit/dropdown": "0.4.0",
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/input-private": "4.2.0",
-    "@snack-uikit/list": "0.20.0",
-    "@snack-uikit/scroll": "0.8.0",
+    "@snack-uikit/input-private": "4.2.1",
+    "@snack-uikit/list": "0.21.0",
+    "@snack-uikit/scroll": "0.9.0",
     "@snack-uikit/skeleton": "0.5.0",
-    "@snack-uikit/slider": "0.3.0",
-    "@snack-uikit/tag": "0.11.0",
+    "@snack-uikit/slider": "0.3.1",
+    "@snack-uikit/tag": "0.11.1",
     "@snack-uikit/tooltip": "0.15.0",
     "@snack-uikit/truncate-string": "0.6.0",
     "@snack-uikit/utils": "3.5.0",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -1,15 +1,5 @@
 import mergeRefs from 'merge-refs';
-import {
-  FocusEvent,
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Calendar, CalendarProps } from '@snack-uikit/calendar';
@@ -22,25 +12,20 @@ import {
   InputPrivateProps,
   runAfterRerender,
   SIZE,
-  Size,
   useButtonNavigation,
   useClearButton,
 } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { CONTAINER_VARIANT, DEFAULT_LOCALE, MODES, SlotKey, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useCopyButton } from '../../hooks';
+import { useCopyButton, useDateField, useFocusHandlers, useHandlers } from '../../hooks';
+import { Mode } from '../../types';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } 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.scss';
-import { parseDate } from './utils';
 
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 
 type WrapperProps = Pick<
   FieldDecoratorProps,
@@ -57,13 +42,20 @@ type WrapperProps = Pick<
   | 'error'
 >;
 
+type FieldDateWithSeconds = {
+  mode: typeof MODES.DateTime;
+  showSeconds?: boolean;
+};
+
 type FieldDateOwnProps = {
   /** Открыт date-picker */
   open?: boolean;
   /** Колбек открытия пикера */
   onOpenChange?(value: boolean): void;
+  /** Значение поля */
+  value?: Date;
   /** Колбек смены значения */
-  onChange?(value: string): void;
+  onChange?(value: Date | undefined): void;
   /** Отображение кнопки копирования */
   showCopyButton?: boolean;
   /**
@@ -71,18 +63,17 @@ type FieldDateOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
-  /** Текущая локаль календаря */
-  locale?: Intl.Locale;
-} & Pick<CalendarProps, 'buildCellProps'>;
+  mode: Mode;
+} & Pick<CalendarProps, 'buildCellProps'> &
+  (
+    | {
+        mode: typeof MODES.Date;
+      }
+    | FieldDateWithSeconds
+  );
 
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
 
-const CALENDAR_SIZE_MAP: Record<Size, CalendarProps['size']> = {
-  [SIZE.S]: 's',
-  [SIZE.M]: 'm',
-  [SIZE.L]: 'm',
-};
-
 export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
   (
     {
@@ -108,15 +99,14 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       showHintIcon,
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
-      locale = DEFAULT_LOCALE,
       buildCellProps,
       error,
+      mode,
       ...rest
     },
     ref,
   ) => {
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
-    const [pickerAutofocus, setPickerAutofocus] = useState(false);
 
     const localRef = useRef<HTMLInputElement>(null);
     const clearButtonRef = useRef<HTMLButtonElement>(null);
@@ -126,20 +116,23 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
     const showAdditionalButton = Boolean(valueProp && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const showSeconds = mode === 'date-time' ? ((rest as FieldDateWithSeconds).showSeconds ?? true) : undefined;
     const fieldValidationState = getValidationState({ validationState, error });
 
+    const navigationStartRef: CalendarProps['navigationStartRef'] = useRef(null);
+
     const checkForLeavingFocus = useCallback(
       <T extends HTMLInputElement | HTMLButtonElement>(event: KeyboardEvent<T>) => {
         if (event.key === 'ArrowDown') {
-          setPickerAutofocus(true);
           setIsOpen(true);
+          setTimeout(() => navigationStartRef.current?.focus(), 0);
         }
       },
       [setIsOpen],
     );
 
     const handleClear = useCallback(() => {
-      onChange && onChange('');
+      onChange && onChange(undefined);
       if (localRef.current?.value) {
         localRef.current.value = '';
       }
@@ -153,8 +146,29 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       }
     }, [onChange, required, setIsOpen]);
 
+    const getStringDateValue = useCallback(
+      (date: Date | undefined) => {
+        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: ButtonProps = useMemo(
       () => ({
         active: false,
@@ -184,11 +198,16 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       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,
@@ -204,11 +223,14 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       submitKeys: ['Enter', 'Space', 'Tab'],
     });
 
-    // TODO: do not hardcode locale here
     const handleSelectDate = (date: Date) => {
-      onChange && onChange(date.toLocaleDateString(DEFAULT_LOCALE));
+      onChange && onChange(date);
       localRef.current?.focus();
       setIsOpen(false);
+
+      if (localRef.current) {
+        localRef.current.value = getStringDateValue(date);
+      }
     };
 
     const handleCalendarFocusLeave: CalendarProps['onFocusLeave'] = () => {
@@ -233,11 +255,12 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       }
     }, [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: FocusEvent<HTMLInputElement>) => {
@@ -296,20 +319,17 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
           content={
             <div className={styles.calendarWrapper} data-size={size}>
               <Calendar
-                mode='date'
-                size={CALENDAR_SIZE_MAP[size]}
-                value={valueProp ? parseDate(valueProp) : undefined}
+                mode={mode}
+                size={size}
+                value={valueProp}
+                showSeconds={showSeconds}
                 onChangeValue={handleSelectDate}
                 buildCellProps={buildCellProps}
-                navigationStartRef={element => {
-                  if (pickerAutofocus) {
-                    element?.focus();
-                    setPickerAutofocus(false);
-                  }
-                }}
+                navigationStartRef={navigationStartRef}
                 onFocusLeave={handleCalendarFocusLeave}
-                locale={locale}
+                locale={DEFAULT_LOCALE}
                 data-test-id='field-date__calendar'
+                fitToContainer={false}
               />
             </div>
           }

package/src/components/FieldDate/index.ts

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

package/src/components/FieldSelect/hooks.ts

@@ -108,7 +108,7 @@ export function useSearchInput({
   selectedOptionFormatter,
   resetSearchOnOptionSelection = true,
 }: SearchState & { selectedOptionFormatter: SelectedOptionFormatter; resetSearchOnOptionSelection?: boolean }) {
-  const [inputValue = '', setInputValue] = useValueControl<string>({ value, onChange, defaultValue });
+  const [inputValue = '', setInputValueState] = useValueControl<string>({ value, onChange, defaultValue });
 
   const prevInputValue = useRef<string>(inputValue);
 
@@ -117,12 +117,24 @@ export function useSearchInput({
       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: string) => {
+      const updatedValue =
+        prevInputValue.current && value.includes(prevInputValue.current)
+          ? value.replace(prevInputValue.current, '')
+          : value;
+
+      setInputValueState(updatedValue);
+    },
+    [setInputValueState],
   );
 
   return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };

package/src/components/FieldTime/FieldTime.tsx

@@ -0,0 +1,350 @@
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { TimePicker, TimePickerProps } from '@snack-uikit/calendar';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { WatchSVG } from '@snack-uikit/icons';
+import {
+  ButtonProps,
+  ICON_SIZE,
+  InputPrivate,
+  InputPrivateProps,
+  runAfterRerender,
+  SIZE,
+  useButtonNavigation,
+  useClearButton,
+} from '@snack-uikit/input-private';
+import { extractSupportProps, WithSupportProps } 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, FieldDecoratorProps } from '../FieldDecorator';
+import styles from './styles.module.scss';
+
+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>;
+
+const getStringTimeValue = (
+  time: TimePickerProps['value'],
+  { showSeconds, locale }: Pick<TimePickerProps, 'showSeconds'> & { locale: Intl.Locale },
+) => {
+  if (!time) {
+    return '';
+  }
+
+  const date = new Date();
+  date.setHours(time.hours ?? 0);
+  date.setMinutes(time.minutes ?? 0);
+  date.setSeconds(time.seconds ?? 0);
+
+  return date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: showSeconds ? 'numeric' : undefined,
+  });
+};
+
+export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(
+  (
+    {
+      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,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+
+    const localRef = useRef<HTMLInputElement>(null);
+    const clearButtonRef = useRef<HTMLButtonElement>(null);
+    const copyButtonRef = useRef<HTMLButtonElement>(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: TimePickerProps['navigationStartRef'] = useRef(null);
+
+    const checkForLeavingFocus = useCallback(
+      <T extends HTMLInputElement | HTMLButtonElement>(event: KeyboardEvent<T>) => {
+        if (event.key === 'ArrowDown') {
+          setIsOpen(true);
+          setTimeout(() => navigationStartRef.current?.focus(), 0);
+        }
+      },
+      [setIsOpen],
+    );
+
+    const handleClear = useCallback(() => {
+      onChange && onChange(undefined);
+      if (localRef.current?.value) {
+        localRef.current.value = '';
+      }
+
+      if (required) {
+        localRef.current?.focus();
+        setIsOpen(true);
+      } else {
+        localRef.current?.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: ButtonProps = useMemo(
+      () => ({
+        active: false,
+        show: true,
+        id: 'watchIcon',
+        render: props => (
+          <WatchSVG {...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: TimePickerProps['value']) => {
+      onChange && onChange(time);
+      localRef.current?.focus();
+      setIsOpen(false);
+
+      if (localRef.current) {
+        localRef.current.value = getStringTimeValue(time, { showSeconds, locale: DEFAULT_LOCALE });
+      }
+    };
+
+    const handleCalendarFocusLeave: TimePickerProps['onFocusLeave'] = () => {
+      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<KeyboardEvent<HTMLInputElement>>([
+      checkForLeavingFocus,
+      timeInputKeyDownHandler,
+      navigationInputKeyDownHandler,
+    ]);
+
+    useEffect(() => {
+      if (open) {
+        localRef.current?.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: FocusEvent<HTMLInputElement>) => {
+        setInputFocus();
+        onFocus?.(e);
+      },
+      [onFocus, setInputFocus],
+    );
+
+    const inputHandlers = useFocusHandlers({
+      onFocusByClick: onFocus,
+      onFocusByKeyboard,
+    });
+
+    const onBlur = useHandlers([timeInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+
+    const onClick = useCallback(
+      (e: MouseEvent<HTMLInputElement>) => {
+        timeInputClickHandler();
+        if (isOpen) {
+          // stop the event because want picker to stay opened
+          e.stopPropagation();
+        }
+      },
+      [timeInputClickHandler, isOpen],
+    );
+
+    return (
+      <FieldDecorator
+        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)}
+      >
+        <Dropdown
+          trigger='click'
+          triggerClassName={styles.triggerClassName}
+          widthStrategy='auto'
+          {...(readonly || disabled
+            ? { open: false }
+            : {
+                open: showDropList,
+                onOpenChange: setIsOpen,
+              })}
+          content={
+            <TimePicker
+              size={size}
+              value={valueProp}
+              onChangeValue={handleSelectTime}
+              navigationStartRef={navigationStartRef}
+              onFocusLeave={handleCalendarFocusLeave}
+              data-test-id='field-time__timepicker'
+              fitToContainer={false}
+              showSeconds={showSeconds}
+            />
+          }
+        >
+          <FieldContainerPrivate
+            className={styles.container}
+            size={size}
+            validationState={fieldValidationState}
+            disabled={disabled}
+            readonly={readonly}
+            variant={CONTAINER_VARIANT.SingleLine}
+            focused={showDropList}
+            inputRef={localRef}
+            postfix={postfixButtons}
+          >
+            <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'
+            />
+          </FieldContainerPrivate>
+        </Dropdown>
+      </FieldDecorator>
+    );
+  },
+);

package/src/components/FieldTime/index.ts

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