@vkontakte/vkui 7.1.3 → 7.2.0

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';
 
@@ -52,7 +53,10 @@ export type DateInputPropsTestsProps = {
 };
 
 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 +65,7 @@ export interface DateInputProps
       | 'shouldDisableDate'
       | 'onChange'
       | 'value'
+      | 'defaultValue'
       | 'doneButtonText'
       | 'DoneButton'
       | 'weekStartsOn'
@@ -101,6 +106,15 @@ export interface DateInputProps
    * Колбэк срабатывающий при нажатии на кнопку "Done". Используется совместно с флагом `enableTime`.
    */
   onApply?: (value?: Date) => void;
+  /**
+   * Функция для кастомного форматирования отображаемого значения даты.
+   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.
+   */
+  renderCustomValue?: (date: Date | undefined) => React.ReactNode;
+  /**
+   * Свойство для отображения времени в нужной таймзоне
+   */
+  timezone?: string;
 }
 
 const elementsConfig = (index: number) => {
@@ -154,8 +168,9 @@ export const DateInput = ({
   minDateTime,
   maxDateTime,
   value: valueProp,
+  defaultValue,
   onChange,
-  calendarPlacement = 'bottom-start',
+  calendarPlacement: calendarPlacementProp = 'bottom-start',
   style,
   className,
   doneButtonText,
@@ -196,6 +211,8 @@ export const DateInput = ({
   minuteFieldTestId,
   id,
   onApply,
+  renderCustomValue,
+  timezone,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -203,16 +220,15 @@ 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 } = 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 +247,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 +277,7 @@ export const DateInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange,
+    onChange: updateValue,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -275,31 +291,43 @@ export const DateInput = ({
   useIsomorphicLayoutEffect(
     function resetValueOnCloseCalendar() {
       if (!open) {
-        setValue(valueProp);
+        setInternalValue(getLastUpdatedValue());
       }
     },
-    [open, valueProp],
+    [open, getLastUpdatedValue],
   );
 
   const onCalendarChange = React.useCallback(
     (value?: Date | undefined) => {
       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);
+    const newValue = updateValue(value);
+    onApply?.(newValue);
     removeFocusFromField();
-  }, [onApply, onChange, removeFocusFromField, value]);
+  }, [onApply, removeFocusFromField, updateValue, value]);
+
+  const customValue = React.useMemo(
+    () => !open && renderCustomValue?.(value),
+    [open, renderCustomValue, value],
+  );
+
+  // при переключении месяцев высота календаря может меняться,
+  // чтобы календарь не прыгал при переключении месяцев каждый раз на
+  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
+  // на ней, пока помещается.
+  const [calendarPlacement, setCalendarPlacement] =
+    React.useState<PlacementWithAuto>(calendarPlacementProp);
 
   return (
     <FormField
@@ -322,79 +350,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}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsRef}
-          index={1}
-          onElementSelect={setFocusedElement}
-          value={internalValue[1]}
-          label={changeMonthLabel}
-          data-testid={monthFieldTestId}
+      <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={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,84 @@
+import * as React from 'react';
+import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
+
+interface UseDateInputValueOptions {
+  value?: Date;
+  defaultValue?: Date;
+  onChange?: (value?: Date) => void;
+  timezone?: string;
+}
+
+export interface UseDateInputValueReturn {
+  value?: Date;
+  updateValue: (v?: Date) => Date | undefined;
+  setInternalValue: (v?: Date) => void;
+  getLastUpdatedValue: () => Date | undefined;
+}
+
+const _convertDateToTimeZone = (date?: Date, timezone?: string): Date | undefined => {
+  return convertDateToTimeZone(date, timezone) || undefined;
+};
+
+const _convertDateFromTimeZone = (date?: Date, timezone?: string): Date | undefined => {
+  return convertDateFromTimeZone(date, timezone) || undefined;
+};
+
+const getStateValue = (
+  defaultStateValue?: Date,
+  value?: Date,
+  defaultValue?: Date,
+  timezone?: string,
+): Date | undefined => {
+  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 isControlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
+    getStateValue(undefined, value, defaultValue, timezone),
+  );
+  const lastUpdatedValueRef = React.useRef<Date | undefined>(
+    getStateValue(undefined, value, defaultValue, timezone),
+  );
+
+  React.useEffect(() => {
+    if (isControlled) {
+      setInternalValue(_convertDateToTimeZone(value, timezone));
+      lastUpdatedValueRef.current = _convertDateToTimeZone(value, timezone);
+    }
+  }, [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],
+  );
+
+  return {
+    value: internalValue,
+    updateValue,
+    setInternalValue,
+    getLastUpdatedValue,
+  };
+};

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 {

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { isAfter } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { callMultiple } from '../../lib/callMultiple';
 import { format, isMatch, parse } from '../../lib/date';
@@ -59,7 +60,7 @@ export type DateRangeInputTestsProps = {
 };
 
 export interface DateRangeInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,
+  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,
     Pick<
       CalendarRangeProps,
       | 'disablePast'
@@ -67,6 +68,7 @@ export interface DateRangeInputProps
       | 'shouldDisableDate'
       | 'onChange'
       | 'value'
+      | 'defaultValue'
       | 'weekStartsOn'
       | 'disablePickers'
       | 'prevMonthLabel'
@@ -146,9 +148,10 @@ export const DateRangeInput = ({
   shouldDisableDate,
   disableFuture,
   disablePast,
-  value,
+  value: valueProp,
+  defaultValue,
   onChange,
-  calendarPlacement = 'bottom-start',
+  calendarPlacement: calendarPlacementProp = 'bottom-start',
   style,
   className,
   closeOnChange = true,
@@ -190,6 +193,12 @@ export const DateRangeInput = ({
   const monthsEndRef = React.useRef<HTMLSpanElement>(null);
   const yearsEndRef = React.useRef<HTMLSpanElement>(null);
 
+  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange,
+  });
+
   const onInternalValueChange = React.useCallback(
     (internalValue: string[]) => {
       let isStartValid = true;
@@ -228,10 +237,10 @@ export const DateRangeInput = ({
         ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)
         : null;
       if (start && end && isAfter(end, start)) {
-        onChange?.([start, end]);
+        updateValue([start, end]);
       }
     },
-    [onChange, value],
+    [updateValue, value],
   );
 
   const refs = React.useMemo(
@@ -257,7 +266,7 @@ export const DateRangeInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange,
+    onChange: updateValue,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -270,14 +279,21 @@ export const DateRangeInput = ({
 
   const onCalendarChange = React.useCallback(
     (newValue: DateRangeType | undefined) => {
-      onChange?.(newValue);
+      updateValue(newValue);
       if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
         removeFocusFromField();
       }
     },
-    [onChange, closeOnChange, value, removeFocusFromField],
+    [updateValue, closeOnChange, value, removeFocusFromField],
   );
 
+  // при переключении месяцев высота календаря может меняться,
+  // чтобы календарь не прыгал при переключении месяцев каждый раз на
+  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
+  // на ней, пока помещается.
+  const [calendarPlacement, setCalendarPlacement] =
+    React.useState<PlacementWithAuto>(calendarPlacementProp);
+
   return (
     <FormField
       style={style}
@@ -301,81 +317,88 @@ export const DateRangeInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <VisuallyHidden
-        id={id}
-        Component="input"
-        name={name}
-        value={
-          value
-            ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
-                value[1] ? format(value[1], 'dd.MM.yyyy') : ''
-              }`
-            : ''
-        }
-      />
-      <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>
-        <InputLike
-          length={2}
-          getRootRef={daysStartRef}
-          index={0}
-          onElementSelect={setFocusedElement}
-          value={internalValue[0]}
-          label={changeStartDayLabel}
-          data-testid={startDateTestsProps?.day}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsStartRef}
-          index={1}
-          onElementSelect={setFocusedElement}
-          value={internalValue[1]}
-          label={changeStartMonthLabel}
-          data-testid={startDateTestsProps?.month}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={4}
-          getRootRef={yearsStartRef}
-          index={2}
-          onElementSelect={setFocusedElement}
-          value={internalValue[2]}
-          label={changeStartYearLabel}
-          data-testid={startDateTestsProps?.year}
-        />
-        <InputLikeDivider>{' — '}</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={daysEndRef}
-          index={3}
-          onElementSelect={setFocusedElement}
-          value={internalValue[3]}
-          label={changeEndDayLabel}
-          data-testid={endDateTestsProps?.day}
+      <div className={dateInputStyles.wrapper}>
+        <VisuallyHidden
+          id={id}
+          Component="input"
+          name={name}
+          value={
+            value
+              ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
+                  value[1] ? format(value[1], 'dd.MM.yyyy') : ''
+                }`
+              : ''
+          }
         />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsEndRef}
-          index={4}
-          onElementSelect={setFocusedElement}
-          value={internalValue[4]}
-          label={changeEndMonthLabel}
-          data-testid={endDateTestsProps?.month}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={4}
-          getRootRef={yearsEndRef}
-          index={5}
-          onElementSelect={setFocusedElement}
-          value={internalValue[5]}
-          label={changeEndYearLabel}
-          data-testid={endDateTestsProps?.year}
-        />
-      </Text>
+        <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>
+          <InputLike
+            length={2}
+            getRootRef={daysStartRef}
+            index={0}
+            onElementSelect={setFocusedElement}
+            value={internalValue[0]}
+            label={changeStartDayLabel}
+            data-testid={startDateTestsProps?.day}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={monthsStartRef}
+            index={1}
+            onElementSelect={setFocusedElement}
+            value={internalValue[1]}
+            label={changeStartMonthLabel}
+            data-testid={startDateTestsProps?.month}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={4}
+            getRootRef={yearsStartRef}
+            index={2}
+            onElementSelect={setFocusedElement}
+            value={internalValue[2]}
+            label={changeStartYearLabel}
+            data-testid={startDateTestsProps?.year}
+          />
+          <InputLikeDivider>{' — '}</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={daysEndRef}
+            index={3}
+            onElementSelect={setFocusedElement}
+            value={internalValue[3]}
+            label={changeEndDayLabel}
+            data-testid={endDateTestsProps?.day}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={monthsEndRef}
+            index={4}
+            onElementSelect={setFocusedElement}
+            value={internalValue[4]}
+            label={changeEndMonthLabel}
+            data-testid={endDateTestsProps?.month}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={4}
+            getRootRef={yearsEndRef}
+            index={5}
+            onElementSelect={setFocusedElement}
+            value={internalValue[5]}
+            label={changeEndYearLabel}
+            data-testid={endDateTestsProps?.year}
+          />
+        </Text>
+      </div>
       {open && !disableCalendar && (
-        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>
+        <Popper
+          targetRef={rootRef}
+          offsetByMainAxis={8}
+          placement={calendarPlacement}
+          onPlacementChange={setCalendarPlacement}
+        >
           <CalendarRange
             value={value}
             onChange={onCalendarChange}