@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/DateInput/DateInput.tsx

@@ -20,6 +20,7 @@ import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
 import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import { useDateInputValue } from './hooks';
 import '../InputLike/InputLike.module.css'; // Reorder css
 import styles from './DateInput.module.css';
 
@@ -49,10 +50,21 @@ export type DateInputPropsTestsProps = {
    * Передает атрибут `data-testid` для поля ввода минут
    */
   minuteFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки показа календаря.
+   */
+  showCalendarButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки очистки даты.
+   */
+  clearButtonTestId?: string;
 };
 
 export interface DateInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,
+  extends Omit<
+      React.InputHTMLAttributes<HTMLDivElement>,
+      'value' | 'defaultValue' | 'onChange' | 'size'
+    >,
     Pick<
       CalendarProps,
       | 'disablePast'
@@ -61,6 +73,7 @@ export interface DateInputProps
       | 'shouldDisableDate'
       | 'onChange'
       | 'value'
+      | 'defaultValue'
       | 'doneButtonText'
       | 'DoneButton'
       | 'weekStartsOn'
@@ -101,6 +114,15 @@ export interface DateInputProps
    * Колбэк срабатывающий при нажатии на кнопку "Done". Используется совместно с флагом `enableTime`.
    */
   onApply?: (value?: Date) => void;
+  /**
+   * Функция для кастомного форматирования отображаемого значения даты.
+   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.
+   */
+  renderCustomValue?: (date: Date | undefined) => React.ReactNode;
+  /**
+   * Свойство для отображения времени в нужной таймзоне
+   */
+  timezone?: string;
 }
 
 const elementsConfig = (index: number) => {
@@ -154,8 +176,9 @@ export const DateInput = ({
   minDateTime,
   maxDateTime,
   value: valueProp,
+  defaultValue,
   onChange,
-  calendarPlacement = 'bottom-start',
+  calendarPlacement: calendarPlacementProp = 'bottom-start',
   style,
   className,
   doneButtonText,
@@ -194,8 +217,12 @@ export const DateInput = ({
   yearFieldTestId,
   hourFieldTestId,
   minuteFieldTestId,
+  showCalendarButtonTestId,
+  clearButtonTestId,
   id,
   onApply,
+  renderCustomValue,
+  timezone,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -203,16 +230,16 @@ export const DateInput = ({
   const yearsRef = React.useRef<HTMLSpanElement>(null);
   const hoursRef = React.useRef<HTMLSpanElement>(null);
   const minutesRef = React.useRef<HTMLSpanElement>(null);
-  const [value, setValue] = React.useState<Date | undefined>(valueProp);
 
-  const maxElement = enableTime ? 4 : 2;
+  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =
+    useDateInputValue({
+      value: valueProp,
+      defaultValue,
+      onChange,
+      timezone,
+    });
 
-  useIsomorphicLayoutEffect(
-    function updateLocalValue() {
-      setValue(valueProp);
-    },
-    [valueProp],
-  );
+  const maxElement = enableTime ? 4 : 2;
 
   const onInternalValueChange = React.useCallback(
     (internalValue: string[]) => {
@@ -231,12 +258,12 @@ export const DateInput = ({
 
       if (isMatch(formattedValue, mask)) {
         const now = new Date();
-        onChange?.(
+        updateValue(
           parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),
         );
       }
     },
-    [enableTime, maxElement, onChange, value],
+    [enableTime, maxElement, updateValue, value],
   );
 
   const refs = React.useMemo(
@@ -261,7 +288,7 @@ export const DateInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange,
+    onClear: clearValue,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -275,31 +302,49 @@ export const DateInput = ({
   useIsomorphicLayoutEffect(
     function resetValueOnCloseCalendar() {
       if (!open) {
-        setValue(valueProp);
+        setInternalValue(getLastUpdatedValue());
       }
     },
-    [open, valueProp],
+    [open, getLastUpdatedValue],
   );
 
   const onCalendarChange = React.useCallback(
     (value?: Date | undefined) => {
+      if (!value) {
+        return;
+      }
       if (enableTime) {
-        setValue(value);
+        setInternalValue(value);
         return;
       }
-      onChange?.(value);
+      updateValue(value);
       if (closeOnChange) {
         removeFocusFromField();
       }
     },
-    [onChange, removeFocusFromField, closeOnChange, enableTime],
+    [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],
   );
 
   const onDoneButtonClick = React.useCallback(() => {
-    onApply?.(value);
-    onChange?.(value);
+    if (!value) {
+      return;
+    }
+    const newValue = updateValue(value);
+    onApply?.(newValue);
     removeFocusFromField();
-  }, [onApply, onChange, removeFocusFromField, value]);
+  }, [onApply, removeFocusFromField, updateValue, value]);
+
+  const customValue = React.useMemo(
+    () => !open && renderCustomValue?.(value || undefined),
+    [open, renderCustomValue, value],
+  );
+
+  // при переключении месяцев высота календаря может меняться,
+  // чтобы календарь не прыгал при переключении месяцев каждый раз на
+  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
+  // на ней, пока помещается.
+  const [calendarPlacement, setCalendarPlacement] =
+    React.useState<PlacementWithAuto>(calendarPlacementProp);
 
   return (
     <FormField
@@ -308,11 +353,21 @@ export const DateInput = ({
       getRootRef={handleRootRef}
       after={
         value ? (
-          <IconButton hoverMode="opacity" label={clearFieldLabel} onClick={clear}>
+          <IconButton
+            hoverMode="opacity"
+            label={clearFieldLabel}
+            onClick={clear}
+            data-testid={clearButtonTestId}
+          >
             <Icon16Clear />
           </IconButton>
         ) : (
-          <IconButton hoverMode="opacity" label={showCalendarLabel} onClick={openCalendar}>
+          <IconButton
+            hoverMode="opacity"
+            label={showCalendarLabel}
+            onClick={openCalendar}
+            data-testid={showCalendarButtonTestId}
+          >
             <Icon20CalendarOutline />
           </IconButton>
         )
@@ -322,79 +377,87 @@ export const DateInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <VisuallyHidden
-        id={id}
-        Component="input"
-        name={name}
-        value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
-      />
-      <Text
-        className={styles.input}
-        onKeyDown={handleKeyDown}
-        // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
-        // из-за чего `.Typography--normalize` перебивает стили.
-        normalize={false}
-        Component="span" // для <span> нормализация не нужна
-      >
-        <InputLike
-          length={2}
-          getRootRef={daysRef}
-          index={0}
-          onElementSelect={setFocusedElement}
-          value={internalValue[0]}
-          label={changeDayLabel}
-          data-testid={dayFieldTestId}
+      <div className={styles.wrapper}>
+        <VisuallyHidden
+          id={id}
+          Component="input"
+          name={name}
+          value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
         />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsRef}
-          index={1}
-          onElementSelect={setFocusedElement}
-          value={internalValue[1]}
-          label={changeMonthLabel}
-          data-testid={monthFieldTestId}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={4}
-          getRootRef={yearsRef}
-          index={2}
-          onElementSelect={setFocusedElement}
-          value={internalValue[2]}
-          label={changeYearLabel}
-          data-testid={yearFieldTestId}
-        />
-        {enableTime && (
-          <React.Fragment>
-            <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>
-            <InputLike
-              length={2}
-              getRootRef={hoursRef}
-              index={3}
-              onElementSelect={setFocusedElement}
-              value={internalValue[3]}
-              label={changeHoursLabel}
-              data-testid={hourFieldTestId}
-            />
-            <InputLikeDivider>:</InputLikeDivider>
-            <InputLike
-              length={2}
-              getRootRef={minutesRef}
-              index={4}
-              onElementSelect={setFocusedElement}
-              value={internalValue[4]}
-              label={changeMinutesLabel}
-              data-testid={minuteFieldTestId}
-            />
-          </React.Fragment>
+        <Text
+          className={classNames(styles.input, customValue && styles.hidden)}
+          onKeyDown={handleKeyDown}
+          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
+          // из-за чего `.Typography--normalize` перебивает стили.
+          normalize={false}
+          Component="span" // для <span> нормализация не нужна
+        >
+          <InputLike
+            length={2}
+            getRootRef={daysRef}
+            index={0}
+            onElementSelect={setFocusedElement}
+            value={internalValue[0]}
+            label={changeDayLabel}
+            data-testid={dayFieldTestId}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={monthsRef}
+            index={1}
+            onElementSelect={setFocusedElement}
+            value={internalValue[1]}
+            label={changeMonthLabel}
+            data-testid={monthFieldTestId}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={4}
+            getRootRef={yearsRef}
+            index={2}
+            onElementSelect={setFocusedElement}
+            value={internalValue[2]}
+            label={changeYearLabel}
+            data-testid={yearFieldTestId}
+          />
+          {enableTime && (
+            <React.Fragment>
+              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>
+              <InputLike
+                length={2}
+                getRootRef={hoursRef}
+                index={3}
+                onElementSelect={setFocusedElement}
+                value={internalValue[3]}
+                label={changeHoursLabel}
+                data-testid={hourFieldTestId}
+              />
+              <InputLikeDivider>:</InputLikeDivider>
+              <InputLike
+                length={2}
+                getRootRef={minutesRef}
+                index={4}
+                onElementSelect={setFocusedElement}
+                value={internalValue[4]}
+                label={changeMinutesLabel}
+                data-testid={minuteFieldTestId}
+              />
+            </React.Fragment>
+          )}
+        </Text>
+        {customValue && (
+          <Text className={styles.customValue} aria-hidden>
+            {customValue}
+          </Text>
         )}
-      </Text>
+      </div>
       {open && !disableCalendar && (
         <Popper
           targetRef={rootRef}
           offsetByMainAxis={8}
           placement={calendarPlacement}
+          onPlacementChange={setCalendarPlacement}
           autoUpdateOnTargetResize
         >
           <Calendar

package/src/components/DateInput/hooks.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
+
+interface UseDateInputValueOptions {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onChange?: (value?: Date) => void;
+  timezone?: string;
+}
+
+export interface UseDateInputValueReturn {
+  value?: Date | null;
+  updateValue: (v: Date) => Date;
+  setInternalValue: (v?: Date | null) => void;
+  getLastUpdatedValue: () => Date | null | undefined;
+  clearValue: () => void;
+}
+
+const _convertDateToTimeZone = (date: Date | null, timezone?: string): Date | null => {
+  return convertDateToTimeZone(date, timezone) || null;
+};
+
+const _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {
+  return convertDateFromTimeZone(date, timezone) as Date;
+};
+
+const getStateValue = (
+  defaultStateValue: Date | null,
+  value?: Date | null,
+  defaultValue?: Date | null,
+  timezone?: string,
+): Date | null => {
+  if (value !== undefined) {
+    return _convertDateToTimeZone(value, timezone);
+  }
+  if (defaultValue !== undefined) {
+    return _convertDateToTimeZone(defaultValue, timezone);
+  }
+  return _convertDateToTimeZone(defaultStateValue, timezone);
+};
+
+export const useDateInputValue = ({
+  value,
+  defaultValue,
+  onChange,
+  timezone,
+}: UseDateInputValueOptions): UseDateInputValueReturn => {
+  const [internalValue, setInternalValue] = React.useState<Date | null | undefined>(
+    getStateValue(null, value, defaultValue, timezone),
+  );
+  const lastUpdatedValueRef = React.useRef<Date | null | undefined>(
+    getStateValue(null, value, defaultValue, timezone),
+  );
+
+  const isControlled = value !== undefined;
+
+  React.useEffect(() => {
+    if (isControlled) {
+      const newInternalValue = _convertDateToTimeZone(value, timezone);
+      setInternalValue(newInternalValue);
+      lastUpdatedValueRef.current = newInternalValue;
+    }
+  }, [isControlled, timezone, value]);
+
+  const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);
+
+  const updateValue = React.useCallback(
+    (newValue: Date) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+        lastUpdatedValueRef.current = newValue;
+      }
+      const originalTimezoneValue = _convertDateFromTimeZone(newValue, timezone);
+      onChange?.(originalTimezoneValue);
+      return originalTimezoneValue;
+    },
+    [isControlled, onChange, timezone],
+  );
+
+  const clearValue = () => {
+    setInternalValue(null);
+    lastUpdatedValueRef.current = null;
+    onChange?.(undefined);
+  };
+
+  return {
+    value: internalValue,
+    updateValue,
+    setInternalValue,
+    getLastUpdatedValue,
+    clearValue,
+  };
+};

package/src/components/DateRangeInput/DateRangeInput.module.css

@@ -1,12 +1,12 @@
 .input {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   flex-grow: 1;
   align-self: center;
   margin-inline: 10px 14px;
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  cursor: text;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  cursor: text;
   user-select: text;
-  font-variant-numeric: tabular-nums;
 }
 
 .sizeYCompact .input {