@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha70

package/src/components/DatePicker/DatePicker.tsx

@@ -1,26 +1,37 @@
-import { FC, FocusEvent, forwardRef, SyntheticEvent, useEffect, useMemo, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
+import {
+  FC,
+  FocusEvent,
+  SyntheticEvent,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
+  addDataAttributes,
   isEmpty,
   isNotEmpty,
+  isString,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+import { offset } from '@floating-ui/react';
+import { useMergedRefs, useOnClickOutside, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
-import { DatePickerHeader, PopperContainer } from './components';
-import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
+import { DatePickerBase, DatePickerHeader, PopperContainer } from './components';
 import {
-  areDatesEquals,
-  getDateFormatter,
-  getDateValueParser,
-  preparateDatePickerLocale,
-} from './helpers';
-import { IDatePickerBaseProps, IDatePickerLocale, IRange } from './types';
+  DEFAULT_DATE_FORMAT,
+  IDatePickerLocale,
+  LocalesMap,
+  OUTSIDE_CLICK_IGNORE_CLASS,
+} from './constants';
+import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
+import { IDatePickerBaseProps, IRange } from './types';
 import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
@@ -42,278 +53,292 @@ export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDa
   onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
 }
 
-export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
-  (
-    {
-      data,
-      selectedDate = null,
-      minDate,
-      maxDate,
-      endDate = null,
-      startDate = null,
-      locale,
-      months,
-      calendarStartDay = 1,
-      dateFormat = DEFAULT_DATE_FORMAT,
-      monthsShown,
-      placeholder,
-      isRange = false,
-      isInline = false,
-      isDisabled,
-      isClearable,
-      strictParsing,
-      fixedHeight,
-      excludeScrollbar,
-      focusSelectedMonth,
-      disabledKeyboardNavigation,
-      shouldRenderPopperInBody = false,
-      allowSameDay = false,
-      shouldCloseOnSelect,
-      showPreviousMonths,
-      preventOpenOnFocus,
-      popperModifiers,
-      popperPlacement,
-      todayButton,
-      highlightDates,
-      calendarContainer,
-      dayClassName,
-      customInput: CustomInput = DateInput,
-      customInputRef,
-      renderCustomHeader,
-      filterDate,
-      onYearChange,
-      onMonthChange,
-      onCalendarOpen,
-      onCalendarClose,
-      onChangeDate,
-      onChangeRange,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      tweakStyles,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function DatePicker(
+  {
+    data,
+    selectedDate = null,
+    minDate,
+    maxDate,
+    endDate = null,
+    startDate = null,
+    locale,
+    months,
+    calendarStartDay = 1,
+    dateFormat = DEFAULT_DATE_FORMAT,
+    monthsShown,
+    placeholder,
+    isRange = false,
+    isInline = false,
+    isDisabled,
+    isClearable,
+    strictParsing,
+    fixedHeight,
+    focusSelectedMonth,
+    disabledKeyboardNavigation,
+    shouldRenderPopperInBody = false,
+    allowSameDay = false,
+    shouldCloseOnSelect,
+    showPreviousMonths,
+    preventOpenOnFocus,
+    popperModifiers = [],
+    popperPlacement = 'bottom-start',
+    popperProps,
+    todayButton,
+    highlightDates,
+    calendarContainer,
+    dayClassName,
+    customInput: CustomInput = DateInput,
+    customInputRef,
+    renderCustomHeader,
+    filterDate,
+    onYearChange,
+    onMonthChange,
+    onCalendarOpen,
+    onCalendarClose,
+    onChangeDate,
+    onChangeRange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    tweakStyles,
+    ...inputProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const tweakDateInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakDateInput',
-      currentComponentName: 'DatePicker',
-    });
+  const tweakDateInputStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakDateInput',
+    currentComponentName: 'DatePicker',
+  });
 
-    const { formatDate, parseDateValue } = useMemo(
-      () => ({
-        formatDate: getDateFormatter(dateFormat),
-        parseDateValue: getDateValueParser(dateFormat),
-      }),
-      [dateFormat],
-    );
+  const { formatDate, parseDateValue } = useMemo(
+    () => ({
+      formatDate: getDateFormatter(dateFormat),
+      parseDateValue: getDateValueParser(dateFormat),
+    }),
+    [dateFormat],
+  );
 
-    const [isOpen, setIsOpen] = useState(false);
+  const datePickerRef = useRef<DatePickerBase>();
 
-    const [dateValue, setDateValue] = useState(formatDate(selectedDate));
+  const componentRef = useMergedRefs([ref, datePickerRef]);
 
-    const [start, setStart] = useState(startDate);
-    const [startDateValue, setStartDateValue] = useState(formatDate(startDate));
-    const [end, setEnd] = useState(endDate);
-    const [endDateValue, setEndDateValue] = useState(formatDate(endDate));
+  const [isOpen, setIsOpen] = useState(false);
 
-    const hasDateInputValue = isRange
-      ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue)
-      : isStringNotEmpty(dateValue);
+  const [dateValue, setDateValue] = useState(formatDate(selectedDate));
 
-    const dateInputProps: IDateInputProps = {
-      ...inputProps,
-      isRange,
-      isDisabled,
-      isClearable,
-      isActive: isOpen,
-      icon: isClearable && hasDateInputValue ? undefined : 'calendar',
-      tweakStyles: tweakDateInputStyles,
-      ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
-    };
+  const [start, setStart] = useState(startDate);
+  const [startDateValue, setStartDateValue] = useState(formatDate(startDate));
+  const [end, setEnd] = useState(endDate);
+  const [endDateValue, setEndDateValue] = useState(formatDate(endDate));
 
-    const handleChangeDate = (value: Date | null, event?: SyntheticEvent) => {
-      onChangeDate?.(value, event);
-    };
+  const hasDateInputValue = isRange
+    ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue)
+    : isStringNotEmpty(dateValue);
 
-    const isDateInRange = (date: Date) =>
-      (isEmpty(minDate) || isAfter(date, minDate)) && (isEmpty(maxDate) || isBefore(date, maxDate));
+  const dateInputProps: IDateInputProps = {
+    ...inputProps,
+    isRange,
+    isDisabled,
+    isClearable,
+    isActive: isOpen,
+    icon: isClearable && hasDateInputValue ? undefined : 'calendar',
+    tweakStyles: tweakDateInputStyles,
+    ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
+  };
 
-    // TODO: Если пропса allowSameDay равна true и введена только начальная дата, то
-    // невозможно будет стереть значение в инпуте. Обойти это можно только если
-    // полностью выбрать период, а затем уже очищать инпут (баг в react-datepicker. В этом
-    // случае value равняется не [null, null], а [start, null])
-    const handleChangeRange = (value: IRange, event?: SyntheticEvent) => {
-      if (
-        allowSameDay ||
-        !areDatesEquals(value?.[0], startDate) ||
-        !areDatesEquals(value?.[1], endDate)
-      ) {
-        setStart(value?.[0] ?? null);
-        setEnd(value?.[1] ?? null);
-        onChangeRange?.(value, event);
-      }
-    };
+  const handleChangeDate = (value: Date | null, event?: SyntheticEvent) => {
+    onChangeDate?.(value, event);
+  };
 
-    const handleChangeDateRangeInput = (value: string) => {
-      const newStartDateValue = value.slice(0, 10);
-      let newStart = parseDateValue(newStartDateValue);
-      const newEndDateValue = value.slice(13);
-      let newEnd = parseDateValue(newEndDateValue);
+  const isDateInRange = (date: Date) =>
+    (isEmpty(minDate) || isAfter(date, minDate)) && (isEmpty(maxDate) || isBefore(date, maxDate));
 
-      if (
-        (isNotEmpty(newStart) && !isValid(newStart)) ||
-        (isNotEmpty(newStart) && !isDateInRange(newStart))
-      ) {
-        newStart = start;
-      }
+  // TODO: Если пропса allowSameDay равна true и введена только начальная дата, то
+  // невозможно будет стереть значение в инпуте. Обойти это можно только если
+  // полностью выбрать период, а затем уже очищать инпут (баг в react-datepicker. В этом
+  // случае value равняется не [null, null], а [start, null])
+  const handleChangeRange = (value: IRange, event?: SyntheticEvent) => {
+    if (
+      allowSameDay ||
+      !areDatesEquals(value?.[0], startDate) ||
+      !areDatesEquals(value?.[1], endDate)
+    ) {
+      setStart(value?.[0] ?? null);
+      setEnd(value?.[1] ?? null);
+      onChangeRange?.(value, event);
+    }
+  };
 
-      if (
-        (isNotEmpty(newEnd) && !isValid(newEnd)) ||
-        (isNotEmpty(newEnd) && !isDateInRange(newEnd))
-      ) {
-        newEnd = end;
-      }
+  // TODO: кажется это можно улучшить, т.к проблему пофиксили (https://github.com/Hacker0x01/react-datepicker/pull/5060)
+  const handleChangeDateRangeInput = (value: string) => {
+    const newStartDateValue = value.slice(0, 10);
+    let newStart = parseDateValue(newStartDateValue);
+    const newEndDateValue = value.slice(13);
+    let newEnd = parseDateValue(newEndDateValue);
 
-      // Если оставить пустой начальную дату и заполненной конечную,
-      // то ломается react-datepicker и в календарике ничего нельзя выбирать
-      if (
-        (isEmpty(newStart) && isValid(newEnd)) ||
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (isValid(newStart) && isValid(newEnd) && isAfter(newStart!, newEnd!))
-      ) {
-        newStart = newEnd;
-        newEnd = null;
-      }
+    if (
+      (isNotEmpty(newStart) && !isValid(newStart)) ||
+      (isNotEmpty(newStart) && !isDateInRange(newStart))
+    ) {
+      newStart = start;
+    }
 
-      setStartDateValue(newStartDateValue);
-      setStart(newStart);
-      setEndDateValue(newEndDateValue);
-      setEnd(newEnd);
-    };
+    if (
+      (isNotEmpty(newEnd) && !isValid(newEnd)) ||
+      (isNotEmpty(newEnd) && !isDateInRange(newEnd))
+    ) {
+      newEnd = end;
+    }
 
-    const handleDateInputBlur = (event: FocusEvent<HTMLInputElement>) => {
-      onBlur?.(event);
-      setDateValue(formatDate(selectedDate));
-    };
+    // Если оставить пустой начальную дату и заполненной конечную,
+    // то ломается react-datepicker и в календарике ничего нельзя выбирать
+    if (
+      (isEmpty(newStart) && isValid(newEnd)) ||
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      (isValid(newStart) && isValid(newEnd) && isAfter(newStart!, newEnd!))
+    ) {
+      newStart = newEnd;
+      newEnd = null;
+    }
 
-    const setDateRangeValues = (startValue: Date | null = null, endValue: Date | null = null) => {
-      let convertedStartDate = formatDate(startValue);
-      const convertedEndDate = formatDate(endValue);
-      if (convertedStartDate === '' && convertedEndDate !== '') {
-        // Если выставлять пустую строку, то конечная дата перепрыгивает на место начальной
-        convertedStartDate = EMPTY_DATE_INPUT_VALUE;
-      }
+    setStartDateValue(newStartDateValue);
+    setStart(newStart);
+    setEndDateValue(newEndDateValue);
+    setEnd(newEnd);
+  };
 
-      setStart(startValue);
-      setStartDateValue(convertedStartDate);
-      setEnd(endValue);
-      setEndDateValue(convertedEndDate);
-    };
+  const handleDateInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+    onBlur?.(event);
+    setDateValue(formatDate(selectedDate));
+  };
 
-    const handleDateRangeInputBlur = (event: FocusEvent<HTMLInputElement>) => {
-      onBlur?.(event);
-      handleChangeRange([start, end], event);
-      setDateRangeValues(start, end);
-    };
+  const setDateRangeValues = (startValue: Date | null = null, endValue: Date | null = null) => {
+    let convertedStartDate = formatDate(startValue);
+    const convertedEndDate = formatDate(endValue);
+    if (convertedStartDate === '' && convertedEndDate !== '') {
+      // Если выставлять пустую строку, то конечная дата перепрыгивает на место начальной
+      convertedStartDate = EMPTY_DATE_INPUT_VALUE;
+    }
+
+    setStart(startValue);
+    setStartDateValue(convertedStartDate);
+    setEnd(endValue);
+    setEndDateValue(convertedEndDate);
+  };
 
-    const handleOpenCalendar = () => {
-      setIsOpen(true);
-      onCalendarOpen?.();
-    };
+  const handleDateRangeInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+    onBlur?.(event);
+    handleChangeRange([start, end], event);
+    setDateRangeValues(start, end);
+  };
 
-    const handleCloseCalendar = () => {
-      setIsOpen(false);
-      if (isRange) {
-        handleChangeRange([start, end]);
-        setDateRangeValues(start, end);
-      } else {
-        setDateValue(formatDate(selectedDate));
-      }
-      onCalendarClose?.();
-    };
+  const handleOpenCalendar = () => {
+    setIsOpen(true);
+    onCalendarOpen?.();
+  };
 
-    useEffect(() => {
+  const handleCloseCalendar = () => {
+    setIsOpen(false);
+    if (isRange) {
+      handleChangeRange([start, end]);
+      setDateRangeValues(start, end);
+    } else {
       setDateValue(formatDate(selectedDate));
-      setDateRangeValues(startDate, endDate);
-    }, [selectedDate, startDate, endDate]);
+    }
+    onCalendarClose?.();
+  };
 
-    return (
-      <div className={classes.root} {...addDataAttributes(data)}>
-        <DatePickerComponent
-          ref={ref}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={preparateDatePickerLocale(locale)}
-          dateFormat={dateFormat}
-          placeholderText={placeholder}
-          calendarStartDay={calendarStartDay}
-          inline={isInline}
-          disabled={isDisabled}
-          fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
-          showPreviousMonths={showPreviousMonths}
-          focusSelectedMonth={focusSelectedMonth}
-          monthsShown={monthsShown}
-          allowSameDay={allowSameDay}
-          showPopperArrow={false}
-          popperClassName={classes.popper}
-          calendarClassName={classes.datepicker}
-          dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
-          disabledKeyboardNavigation={disabledKeyboardNavigation}
-          popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
-          popperModifiers={popperModifiers}
-          popperPlacement={popperPlacement}
-          selectsRange={isRange}
-          strictParsing={strictParsing}
-          preventOpenOnFocus={preventOpenOnFocus}
-          shouldCloseOnSelect={shouldCloseOnSelect}
-          customInputRef={customInputRef}
-          customInput={<CustomInput {...dateInputProps} />}
-          renderCustomHeader={
-            renderCustomHeader ??
-            ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
+  useEffect(() => {
+    setDateValue(formatDate(selectedDate));
+    setDateRangeValues(startDate, endDate);
+  }, [selectedDate, startDate, endDate]);
+
+  // Кастомный обработчик клика снаружи, чтобы можно было поставить фокус на Input при открытом календаре.
+  // Проблема в том, что класс OUTSIDE_CLICK_IGNORE_CLASS висит контейнере Input'а. А react-datepicker
+  // проверяет наличие класса непосредственно на элементе, который вызвал клик, но не на его родителях
+  useOnClickOutside(
+    () => datePickerRef.current?.calendar?.containerRef?.current,
+    (event) => datePickerRef.current?.handleClickOutside(event as MouseEvent),
+    OUTSIDE_CLICK_IGNORE_CLASS,
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <DatePickerBase
+        ref={componentRef}
+        minDate={minDate}
+        maxDate={maxDate}
+        locale={isString(locale) ? LocalesMap[locale] : locale}
+        dateFormat={dateFormat}
+        placeholderText={placeholder}
+        calendarStartDay={calendarStartDay}
+        inline={isInline}
+        disabled={isDisabled}
+        fixedHeight={fixedHeight}
+        showPreviousMonths={showPreviousMonths}
+        focusSelectedMonth={focusSelectedMonth}
+        monthsShown={monthsShown}
+        allowSameDay={allowSameDay}
+        showPopperArrow={false}
+        popperClassName={classes.popper}
+        calendarClassName={classes.datepicker}
+        dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
+        disabledKeyboardNavigation={disabledKeyboardNavigation}
+        popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
+        // Убираем дефолтный отступ в 10px из либы
+        // https://github.com/Hacker0x01/react-datepicker/blob/db67a58de2b05d2681bdf0a4977b606095d514c4/src/with_floating.tsx#L58
+        popperModifiers={[offset(-10), ...popperModifiers]}
+        popperProps={popperProps}
+        popperPlacement={popperPlacement}
+        strictParsing={strictParsing}
+        preventOpenOnFocus={preventOpenOnFocus}
+        shouldCloseOnSelect={shouldCloseOnSelect}
+        customInputRef={customInputRef}
+        customInput={<CustomInput {...dateInputProps} />}
+        renderDayContents={(day) => <div className={classes.dayInner}>{day}</div>}
+        renderCustomHeader={
+          renderCustomHeader ?? ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
+        }
+        todayButton={todayButton}
+        highlightDates={highlightDates}
+        calendarContainer={calendarContainer}
+        filterDate={filterDate}
+        onYearChange={onYearChange}
+        onMonthChange={onMonthChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        onCalendarOpen={handleOpenCalendar}
+        onCalendarClose={handleCloseCalendar}
+        onChangeRaw={(_, value?: string) => {
+          // Если передали value, значит этот обработчик вызвался после изменения значения в инпуте
+          // (react-datepicker вызывает эту функцию также при клике на дату в календаре)
+          if (value === undefined) {
+            return;
           }
-          todayButton={todayButton}
-          highlightDates={highlightDates}
-          calendarContainer={calendarContainer}
-          filterDate={filterDate}
-          onYearChange={onYearChange}
-          onMonthChange={onMonthChange}
-          onFocus={onFocus}
-          onKeyDown={onKeyDown}
-          onCalendarOpen={handleOpenCalendar}
-          onCalendarClose={handleCloseCalendar}
-          onChangeRaw={(_, value?: string) => {
-            // Если передали value, значит этот обработчик вызвался после изменения значения в инпуте
-            // (react-datepicker вызывает эту функцию также при клике на дату в календаре)
-            if (value === undefined) {
-              return;
-            }
-            if (isRange) {
-              handleChangeDateRangeInput(value);
-            } else {
-              setDateValue(value);
+          if (isRange) {
+            handleChangeDateRangeInput(value);
+          } else {
+            setDateValue(value);
+          }
+        }}
+        {...(isRange
+          ? {
+              startDate: start,
+              endDate: end,
+              selected: start,
+              selectsRange: true,
+              onBlur: handleDateRangeInputBlur,
+              onChange: handleChangeRange,
             }
-          }}
-          {...(isRange
-            ? {
-                startDate: start,
-                endDate: end,
-                selected: start,
-                onBlur: handleDateRangeInputBlur,
-                onChange: handleChangeRange,
-              }
-            : {
-                selected: selectedDate,
-                onBlur: handleDateInputBlur,
-                onChange: handleChangeDate,
-              })}
-        />
-      </div>
-    );
-  },
-);
+          : {
+              selected: selectedDate,
+              onBlur: handleDateInputBlur,
+              onChange: handleChangeDate,
+            })}
+      />
+    </div>
+  );
+});

package/src/components/DatePicker/components/DatePickerBase/DatePickerBase.tsx

@@ -0,0 +1,14 @@
+import ReactDatePicker, { DatePickerProps } from 'react-datepicker';
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+
+export class DatePickerBase extends ReactDatePicker {
+  public handleClickOutside;
+
+  constructor(props: DatePickerProps) {
+    super(props);
+    this.handleClickOutside = this.handleCalendarClickOutside;
+    // Затираем дефолтный обработчик клика снаружи, чтобы обрабатывать его самим
+    // (см. использование useOnClickOutside в DatePicker)
+    this.handleCalendarClickOutside = doNothing;
+  }
+}

package/src/components/DatePicker/components/DatePickerBase/index.ts

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

package/src/components/DatePicker/components/PopperContainer/PopperContainer.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { Portal } from 'react-overlays';
+import { FC, PropsWithChildren } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
 
-export const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
+export const PopperContainer: FC<PropsWithChildren> = (props) => (
+  <FloatingPortal root={document.body} {...props} />
 );

package/src/components/DatePicker/components/index.ts

@@ -1,2 +1,3 @@
+export * from './DatePickerBase';
 export * from './DatePickerHeader';
 export * from './PopperContainer';

package/src/components/DatePicker/constants.ts

@@ -1,6 +1,12 @@
-import ReactDatePicker from 'react-datepicker';
+import { enUS as enLocale, ru as ruLocale, type Locale } from 'date-fns/locale';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const DatePickerComponent =
-  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;
+export const OUTSIDE_CLICK_IGNORE_CLASS = 'react-datepicker-ignore-onclickoutside';
+
+export const LocalesMap = {
+  ru: ruLocale,
+  en: enLocale,
+} satisfies Record<string, Locale>;
+
+export type IDatePickerLocale = keyof typeof LocalesMap | Locale;