@snack-uikit/fields 0.30.0 → 0.32.0

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

@@ -1,18 +1,18 @@
-@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';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $containerVariant: 'single-line-container';
 $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,
 );
 
 $base-min-width: 4px;
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
 
   width: 100%;
 }
@@ -33,10 +33,10 @@ $base-min-width: 4px;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'select-multiple', $size);
+      @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'select-multiple', $size);
 
       .contentWrapper {
-        gap: simple-var($fields, 'select-multiple', $size, 'gap');
+        gap: styles-tokens-element.simple-var(styles-tokens-fields.$fields, 'select-multiple', $size, 'gap');
       }
     }
   }
@@ -49,27 +49,27 @@ $base-min-width: 4px;
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       .inputPlug {
-        @include composite-var($theme-variables, 'sans', 'body', $size);
+        @include styles-tokens-element.composite-var(styles-tokens-element.$theme-variables, 'sans', 'body', $size);
       }
 
       .arrowIcon {
-        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 */
-        color: $sys-neutral-text-light;
+        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 */
+        color: styles-tokens-element.$sys-neutral-text-light;
       }
 
       &[data-variant='#{$containerVariant}'] {
         .displayValue {
-          $button-width: simple-var($icons-sizes, $size);
-          $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
+          $button-width: styles-tokens-element.simple-var($icons-sizes, $size);
+          $postfix-width: calc(var(#{styles-tokens-element.$space-fields-postfix-gap}) + $button-width * 2);
           $margin-right: calc(
-            #{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
+            #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-right')} + #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
           );
 
           width: calc(100% - $margin-right);
           margin-right: $margin-right;
-          padding-left: simple-var($fields, $containerVariant, $size, 'padding-left');
-          border-radius: simple-var($fields, $containerVariant, $size, 'border-radius');
+          padding-left: styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-left');
+          border-radius: styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'border-radius');
         }
       }
     }
@@ -79,14 +79,14 @@ $base-min-width: 4px;
   &:focus-within,
   &[data-focused] {
     .arrowIcon {
-      color: $sys-neutral-text-support;
+      color: styles-tokens-element.$sys-neutral-text-support;
     }
   }
 
   &[data-disabled],
   &[data-readonly] {
     .arrowIcon {
-      color: $sys-neutral-text-disabled;
+      color: styles-tokens-element.$sys-neutral-text-disabled;
     }
   }
 }
@@ -125,7 +125,7 @@ $base-min-width: 4px;
 .postfix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-element.$space-fields-postfix-gap;
 }
 
 input.readonlyCursor {

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

@@ -1,5 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
 $sizes: 's', 'm', 'l';
 
@@ -14,7 +14,7 @@ $sizes: 's', 'm', 'l';
 
     @each $size in $sizes {
       &[data-size='#{$size}'] {
-        @include composite-var($fields, 'slider-wrap', $size);
+        @include styles-theme-variables.composite-var(styles-tokens-fields.$fields, 'slider-wrap', $size);
 
         height: inherit;
       }
@@ -24,6 +24,6 @@ $sizes: 's', 'm', 'l';
 
 .fieldContainer {
   svg {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+    color: styles-theme-variables.simple-var(styles-theme-variables.$theme-variables, 'sys', 'neutral', 'text-disabled');
   }
 }

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

@@ -1,25 +1,25 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 $sizes: 's', 'm', 'l';
 $padding-right: (
-  's': $fields-buttons-s,
-  'm': $fields-buttons-m,
-  'l': $fields-buttons-m,
+  's': styles-tokens-fields.$fields-buttons-s,
+  'm': styles-tokens-fields.$fields-buttons-m,
+  'l': styles-tokens-fields.$fields-buttons-m,
 );
 $scroll-bar-heights: (
-  's': $dimension-050m,
-  'm': calc($dimension-025m + $dimension-050m),
-  'l': $dimension-1m,
+  's': styles-tokens-fields.$dimension-050m,
+  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'l': styles-tokens-fields.$dimension-1m,
 );
 $padding-right: (
-  's': $fields-buttons-s,
-  'm': $fields-buttons-m,
-  'l': $fields-buttons-m,
+  's': styles-tokens-fields.$fields-buttons-s,
+  'm': styles-tokens-fields.$fields-buttons-m,
+  'l': styles-tokens-fields.$fields-buttons-m,
 );
 $scroll-bar-heights: (
-  's': $dimension-050m,
-  'm': calc($dimension-025m + $dimension-050m),
-  'l': $dimension-1m,
+  's': styles-tokens-fields.$dimension-050m,
+  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'l': styles-tokens-fields.$dimension-1m,
 );
 
 .container {
@@ -37,18 +37,18 @@ $scroll-bar-heights: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      --row-height: #{simple-var($theme-variables, 'sans', 'body', $size, 'line-height')};
-      --horizontal-scroll-bar-height: #{simple-var($scroll-bar-heights, $size)};
+      --row-height: #{styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size, 'line-height')};
+      --horizontal-scroll-bar-height: #{styles-tokens-fields.simple-var($scroll-bar-heights, $size)};
 
       .textarea {
         overflow: hidden;
-        padding-right: calc(simple-var($padding-right, $size, 'width') + simple-var($fields-scroll-bar-width, 'width'));
+        padding-right: calc(styles-tokens-fields.simple-var($padding-right, $size, 'width') + styles-tokens-fields.simple-var(styles-tokens-fields.$fields-scroll-bar-width, 'width'));
       }
 
       .postfix {
         position: absolute;
-        top: simple-var($fields, 'multi-line-container', $size, 'padding-top');
-        right: calc(simple-var($fields, 'multi-line-container', $size, 'padding-right') + simple-var($fields-scroll-bar-width, 'width'));
+        top: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'multi-line-container', $size, 'padding-top');
+        right: calc(styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'multi-line-container', $size, 'padding-right') + styles-tokens-fields.simple-var(styles-tokens-fields.$fields-scroll-bar-width, 'width'));
       }
     }
   }

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

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

@@ -0,0 +1,41 @@
+@use '@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';
+$icons-sizes: (
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s
+);
+
+.triggerClassName {
+  --offset: #{styles-tokens-fields.$space-drop-list-drop-offset};
+
+  display: block;
+  width: 100%;
+}
+
+.container {
+  .calendarIcon {
+    color: styles-tokens-fields.$sys-neutral-text-light;
+
+    @each $size in $sizes {
+      &[data-size='#{$size}'] {
+        width: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover, &:focus-within, &[data-focused] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-support;
+    }
+  }
+
+  &[data-disabled], &[data-readonly] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/components/index.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';