@true-engineering/true-react-common-ui-kit 4.0.0-alpha30 → 4.0.0-alpha32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha30",
+  "version": "4.0.0-alpha32",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, forwardRef, MouseEvent } from 'react';
+import { ChangeEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
@@ -18,7 +18,6 @@ export interface IDateInputProps
   className?: string;
   /** @default false */
   isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   // react-datepicker ожидает event первым аргументом
   onChange?: (event: IChangeInputEvent, value: string) => void;
 }
@@ -71,7 +70,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+      <div className={clsx(classes.root, className)} {...addDataAttributes(data)} onClick={onClick}>
         <Input
           {...inputProps}
           ref={ref}

package/src/components/DatePicker/DatePicker.tsx

@@ -1,27 +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 { offset } from '@floating-ui/react';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+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> {
@@ -111,6 +121,10 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       [dateFormat],
     );
 
+    const datePickerRef = useRef<DatePickerBase>();
+
+    const componentRef = useMergedRefs([ref, datePickerRef]);
+
     const [isOpen, setIsOpen] = useState(false);
 
     const [dateValue, setDateValue] = useState(formatDate(selectedDate));
@@ -242,13 +256,22 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       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)}>
-        <DatePickerComponent
-          ref={ref}
+        <DatePickerBase
+          ref={componentRef}
           minDate={minDate}
           maxDate={maxDate}
-          locale={preparateDatePickerLocale(locale)}
+          locale={isString(locale) ? LocalesMap[locale] : locale}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}

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

package/src/components/DatePicker/helpers.ts

@@ -1,12 +1,10 @@
-import { parse, format, isSameDay, type Locale } from 'date-fns';
-import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
+import { format, isSameDay, parse } from 'date-fns';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
-import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -23,13 +21,3 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
-
-export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
-  if (locale === 'ru') {
-    return ruLocale;
-  }
-  if (locale === 'en') {
-    return enLocale;
-  }
-  return locale;
-};

package/src/components/DatePicker/index.ts

@@ -1,4 +1,5 @@
 export * from './DatePicker';
 export * from './types';
+export type { IDatePickerLocale } from './constants';
 export type { IDatePickerStyles } from './DatePicker.styles';
 export type { IDatePickerHeaderStyles } from './components';

package/src/components/DatePicker/types.ts

@@ -1,11 +1,8 @@
-import { DatePickerProps } from 'react-datepicker';
-import { type Locale } from 'date-fns';
+import { type DatePickerProps } from 'react-datepicker';
 import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
-export type IDatePickerLocale = 'ru' | 'en' | Locale;
-
 export type IDatePickerBaseProps = Pick<
   DatePickerProps,
   | 'startDate'

package/src/components/Input/InputBase.tsx

@@ -28,7 +28,7 @@ import { IInputStyles, useStyles } from './Input.styles';
 
 export interface IInputBaseProps
   extends ICommonProps<IInputStyles>,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'className'>,
     Pick<
       IControlWrapperProps,
       | 'label'

package/src/components/Select/Select.tsx

@@ -17,6 +17,7 @@ import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import {
+  applyAction,
   createFilter,
   getArray,
   getTestId,
@@ -39,14 +40,14 @@ import {
   defaultIsOptionDisabled,
   getDefaultConvertToIdFunction,
 } from './helpers';
-import { IChangeSelectEvent, IMultipleSelectValue } from './types';
+import { IChangeSelectEvent, IMultipleSelectValue, ISelectFooter } from './types';
 import { getInputStyles, ISelectStyles, useStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
     ICommonProps<ISelectStyles> {
   header?: ReactNode;
-  footer?: ReactNode;
+  footer?: ISelectFooter<Value>;
   defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
@@ -194,7 +195,7 @@ export function Select<Value>(
 
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
-      return options;
+      return options as Value[];
     }
 
     const filter =
@@ -554,7 +555,7 @@ export function Select<Value>(
           allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={customHeader}
-          customListFooter={footer}
+          customListFooter={applyAction(footer, { filteredOptions })}
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}
           activeValue={value}

package/src/components/Select/types.ts

@@ -1,6 +1,9 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
+import { IRenderNode } from '../../types';
 import { IChangeInputEvent } from '../Input';
 
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
 
 export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;
+
+export type ISelectFooter<T> = IRenderNode<{ filteredOptions: T[] }>;

package/src/hooks/index.ts

@@ -1,9 +1,10 @@
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-ref';
 export * from './use-is-mounted';
+export * from './use-latest-ref';
+export * from './use-merge';
+export * from './use-merged-refs';
+export * from './use-mixed-styles';
 export * from './use-on-click-outside';
-export * from './use-dropdown';
 export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
-export * from './use-mixed-styles';
-export * from './use-merged-refs';
-export * from './use-merge';
-export * from './use-intersection-ref';

package/src/hooks/use-intersection-ref.ts

@@ -1,5 +1,6 @@
-import { useRef, useMemo, RefCallback } from 'react';
+import { RefCallback, useMemo } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
 
 export interface IInsertionRefOptions {
   /** @default false */
@@ -9,8 +10,7 @@ export interface IInsertionRefOptions {
 }
 
 export const useIntersectionRef = (options?: IInsertionRefOptions): RefCallback<Element> => {
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
+  const optionsRef = useLatestRef(options);
 
   return useMemo(() => {
     const observer = new IntersectionObserver(([{ isIntersecting }]) => {
@@ -26,5 +26,5 @@ export const useIntersectionRef = (options?: IInsertionRefOptions): RefCallback<
     });
 
     return (node) => (isNotEmpty(node) ? observer.observe(node) : observer.disconnect());
-  }, []);
+  }, [optionsRef]);
 };

package/src/hooks/use-latest-ref.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject, useRef } from 'react';
+
+export const useLatestRef = <T>(value: T): MutableRefObject<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

package/src/hooks/use-on-click-outside.ts

@@ -1,4 +1,6 @@
 import { RefObject, useEffect } from 'react';
+import { isEmpty, isFunction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
 
 export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
   if (element.classList.contains(className)) {
@@ -33,37 +35,43 @@ export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElem
 };
 
 export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
+  refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined,
   handler: (event: MouseEvent | TouchEvent) => void,
   ignoreRef?: RefObject<IgnoreElem>,
 ): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
+  useOnClickOutside(refOrGetter, handler, undefined, ignoreRef);
 }
 
 export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
+  refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined,
   handler: (event: MouseEvent | TouchEvent) => void,
   ignoreClassName?: string,
   ignoreRef?: RefObject<IgnoreElem>,
 ): void {
+  const optionsRef = useLatestRef({ refOrGetter, ignoreRef, ignoreClassName, handler });
+
   useEffect(() => {
     const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
+      const options = optionsRef.current;
+
+      const elem = isFunction(options.refOrGetter)
+        ? options.refOrGetter()
+        : options.refOrGetter?.current;
+      const ignoreElem = options.ignoreRef?.current;
+      const target = event.target as HTMLElement;
 
       if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+        isEmpty(elem) ||
+        // Do nothing if clicking ref's element or descendent elements
+        elem.contains(target) ||
+        (isNotEmpty(options.ignoreClassName) &&
+          checkElementParentsClassNames(target, options.ignoreClassName)) ||
+        (isNotEmpty(ignoreElem) && isElementOneOfParents(target, ignoreElem))
       ) {
         return;
       }
 
-      handler(event);
+      options.handler(event);
     };
 
     document.addEventListener('mousedown', listener);
@@ -73,5 +81,5 @@ export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends H
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [ref, handler, ignoreClassName]);
+  }, [optionsRef]);
 }