@snack-uikit/fields 0.30.0 → 0.32.0

package/src/components/FieldColor/styles.module.scss

@@ -1,15 +1,14 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $icons-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
-  'l': $icon-s,
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s,
 );
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   display: block;
   width: 100%;
@@ -18,12 +17,12 @@ $icons-sizes: (
 .colorPreview {
   position: relative;
 
-  width: $dimension-2m;
-  height: $dimension-2m;
+  width: styles-tokens-element.$dimension-2m;
+  height: styles-tokens-element.$dimension-2m;
 
   /* stylelint-disable-next-line color-no-hex */
   background-color: #fff;
-  border-radius: $dimension-050m;
+  border-radius: styles-tokens-element.$dimension-050m;
 
   &::after {
     content: '';
@@ -36,6 +35,6 @@ $icons-sizes: (
     height: 100%;
 
     background-color: var(--color);
-    border-radius: $dimension-050m;
+    border-radius: styles-tokens-element.$dimension-050m;
   }
 }

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/FieldDate/styles.module.scss

@@ -1,15 +1,14 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $icons-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
-  'l': $icon-s
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s
 );
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   display: block;
   width: 100%;
@@ -35,25 +34,25 @@ $icons-sizes: (
 
 .container {
   .calendarIcon {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-element.$sys-neutral-text-light;
 
     @each $size in $sizes {
       &[data-size='#{$size}'] {
-        width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        width: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-element.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
 
   &:hover, &:focus-within, &[data-focused] {
     .calendarIcon {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-element.$sys-neutral-text-support;
     }
   }
 
   &[data-disabled], &[data-readonly] {
     .calendarIcon {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-element.$sys-neutral-text-disabled;
     }
   }
 }

package/src/components/FieldDecorator/styles.module.scss

@@ -1,26 +1,25 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $header-typography: (
-  's': $sans-label-m,
-  'm': $sans-label-l,
-  'l': $sans-label-l,
+  's': styles-tokens-fields.$sans-label-m,
+  'm': styles-tokens-fields.$sans-label-l,
+  'l': styles-tokens-fields.$sans-label-l,
 );
 $footer-typography: (
-  's': $sans-body-s,
-  'm': $sans-body-m,
-  'l': $sans-body-m,
+  's': styles-tokens-fields.$sans-body-s,
+  'm': styles-tokens-fields.$sans-body-m,
+  'l': styles-tokens-fields.$sans-body-m,
 );
 $hint-icon-container: (
-  's': $fields-hint-icon-container-s,
-  'm': $fields-hint-icon-container-m,
-  'l': $fields-hint-icon-container-m,
+  's': styles-tokens-fields.$fields-hint-icon-container-s,
+  'm': styles-tokens-fields.$fields-hint-icon-container-m,
+  'l': styles-tokens-fields.$fields-hint-icon-container-m,
 );
 $caption-typography: (
-  's': $sans-body-s,
-  'm': $sans-body-m,
-  'l': $sans-body-m,
+  's': styles-tokens-fields.$sans-body-s,
+  'm': styles-tokens-fields.$sans-body-m,
+  'l': styles-tokens-fields.$sans-body-m,
 );
 
 .decorator {
@@ -33,50 +32,50 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'decorator', $size);
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'decorator', $size);
     }
   }
 }
 
 .header {
   display: flex;
-  gap: $dimension-050m;
+  gap: styles-tokens-fields.$dimension-050m;
   box-sizing: border-box;
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($header-typography, $size);
+      @include styles-tokens-fields.composite-var($header-typography, $size);
 
       .caption {
-        @include composite-var($caption-typography, $size);
+        @include styles-tokens-fields.composite-var($caption-typography, $size);
 
         margin-left: auto;
-        color: $sys-neutral-text-light;
+        color: styles-tokens-fields.$sys-neutral-text-light;
       }
     }
   }
 }
 
 .labelLayout {
-  @include composite-var($fields-label-label-layout);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-label-label-layout);
 
   display: inline-flex;
   align-items: center;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-fields.$sys-neutral-text-light;
 }
 
 .label {
   display: grid;
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 }
 
 .required {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 }
 
 .footer {
-  @include composite-var($fields-hint-container);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-hint-container);
 
   display: flex;
   justify-content: space-between;
@@ -84,7 +83,7 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($footer-typography, $size);
+      @include styles-tokens-fields.composite-var($footer-typography, $size);
     }
   }
 
@@ -94,7 +93,7 @@ $caption-typography: (
 }
 
 .hintLayout {
-  @include composite-var($fields-hint-hint-layout);
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields-hint-hint-layout);
 
   display: inline-flex;
   align-items: flex-start;
@@ -108,7 +107,7 @@ $caption-typography: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($hint-icon-container, $size);
+      @include styles-tokens-fields.composite-var($hint-icon-container, $size);
     }
   }
 }
@@ -119,26 +118,26 @@ $caption-typography: (
   word-break: break-word;
 
   &[data-validation='default'] {
-    color: $sys-neutral-text-light;
+    color: styles-tokens-fields.$sys-neutral-text-light;
   }
 
   &[data-validation='error'] {
-    color: $sys-red-text-main;
+    color: styles-tokens-fields.$sys-red-text-main;
   }
 
   &[data-validation='warning'] {
-    color: $sys-yellow-text-main;
+    color: styles-tokens-fields.$sys-yellow-text-main;
   }
 
   &[data-validation='success'] {
-    color: $sys-green-text-main;
+    color: styles-tokens-fields.$sys-green-text-main;
   }
 }
 
 .icon {
   flex-shrink: 0;
   box-sizing: content-box;
-  color: $sys-neutral-text-light;
+  color: styles-tokens-fields.$sys-neutral-text-light;
 }
 
 .hintIcon {
@@ -146,39 +145,39 @@ $caption-typography: (
   box-sizing: content-box;
 
   &[data-validation='default'] {
-    color: $sys-neutral-accent-default;
+    color: styles-tokens-fields.$sys-neutral-accent-default;
   }
 
   &[data-validation='error'] {
-    color: $sys-red-accent-default;
+    color: styles-tokens-fields.$sys-red-accent-default;
   }
 
   &[data-validation='warning'] {
-    color: $sys-yellow-accent-default;
+    color: styles-tokens-fields.$sys-yellow-accent-default;
   }
 
   &[data-validation='success'] {
-    color: $sys-green-accent-default;
+    color: styles-tokens-fields.$sys-green-accent-default;
   }
 }
 
 .counterLimit {
   > span {
     &[data-validation='default'] {
-      color: $sys-neutral-text-light;
+      color: styles-tokens-fields.$sys-neutral-text-light;
     }
 
     &[data-limit-exceeded],
     &[data-validation='error'] {
-      color: $sys-red-text-light;
+      color: styles-tokens-fields.$sys-red-text-light;
     }
 
     &[data-validation='warning'] {
-      color: $sys-yellow-text-light;
+      color: styles-tokens-fields.$sys-yellow-text-light;
     }
 
     &[data-validation='success'] {
-      color: $sys-green-text-light;
+      color: styles-tokens-fields.$sys-green-text-light;
     }
   }
 }
@@ -186,18 +185,18 @@ $caption-typography: (
 .counterCurrentValue {
   &[data-limit-exceeded] {
     &[data-validation='default'] {
-      color: $sys-neutral-text-main;
+      color: styles-tokens-fields.$sys-neutral-text-main;
     }
     &[data-validation='error'] {
-      color: $sys-red-text-main;
+      color: styles-tokens-fields.$sys-red-text-main;
     }
 
     &[data-validation='warning'] {
-      color: $sys-yellow-text-main;
+      color: styles-tokens-fields.$sys-yellow-text-main;
     }
 
     &[data-validation='success'] {
-      color: $sys-green-text-light;
+      color: styles-tokens-fields.$sys-green-text-light;
     }
   }
 }

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