@true-engineering/true-react-common-ui-kit 4.0.0-alpha74 → 4.0.0-alpha76

package/src/components/Select/Select.tsx

@@ -1,6 +1,5 @@
 import {
   ChangeEvent,
-  CSSProperties,
   FocusEvent,
   KeyboardEvent,
   MouseEvent,
@@ -13,7 +12,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import {
@@ -25,14 +23,14 @@ import {
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { hasExactParent } from '../../helpers';
-import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { IDropdownWithPopperOptions, IReplaceTweakStylesProps } from '../../types';
+import { useDidMountEffect, useIsMounted, useTweakStyles } from '../../hooks';
+import { IClickHandlerEvent, IReplaceTweakStylesProps } from '../../types';
 import { IControlWrapperIcon } from '../ControlWrapper';
 import { IIcon, renderIcon } from '../Icon';
 import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { WithMessages } from '../WithMessages';
+import { IWithPopupProps, WithPopup } from '../WithPopup';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
@@ -41,8 +39,13 @@ import {
   defaultIsOptionDisabled,
   getDefaultConvertToIdFunction,
 } from './helpers';
-import { IChangeSelectEvent, IMultipleSelectValue, ISelectFooter } from './types';
-import { getInputStyles, ISelectStyles, useStyles } from './Select.styles';
+import {
+  IChangeSelectEvent,
+  IFloatingDropdownOptions,
+  IMultipleSelectValue,
+  ISelectFooter,
+} from './types';
+import { getInputStyles, ISelectStyles, useStyles, withPopupStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<
@@ -61,7 +64,7 @@ export interface ISelectProps<Value>
   debounceTime?: number;
   /** @default 0 */
   minSymbolsCountToOpenList?: number;
-  dropdownOptions?: IDropdownWithPopperOptions;
+  dropdownOptions?: IFloatingDropdownOptions;
   /** @default 'chevron-down' */
   dropdownIcon?: IIcon | null;
   options: Value[] | readonly Value[];
@@ -79,7 +82,10 @@ export interface ISelectProps<Value>
   onBlur?: (event: Event | SyntheticEvent) => void;
   onType?: (value: string) => Promise<void>;
   optionsFilter?: (options: Value[], query: string) => Value[];
-  onOpen?: () => void;
+  /** @description Функция должна быть мемоизирована */
+  onOpen?: VoidFunction;
+  /** @description Функция должна быть мемоизирована */
+  onClose?: VoidFunction;
   compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
   /** @description Функция должна быть мемоизирована с целью избежания ререндера */
   convertValueToString?: (value: Value) => string | undefined;
@@ -135,6 +141,7 @@ export function Select<Value>(
     onBlur,
     onType,
     onOpen,
+    onClose,
     isOptionDisabled = defaultIsOptionDisabled,
     compareValuesOnChange = defaultCompareFunction,
     convertValueToString = defaultConvertFunction,
@@ -178,8 +185,16 @@ export function Select<Value>(
     currentComponentName: 'Select',
   });
 
+  const tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'WithTooltip',
+  });
+
   const isMounted = useIsMounted();
-  const [isListOpen, setIsListOpen] = useState(false);
+  const isDropdownOpenState = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = isDropdownOpenState;
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
   const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
 
@@ -189,9 +204,6 @@ export function Select<Value>(
   // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
   const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
 
-  const root = useRef<HTMLDivElement>(null);
-  const inputWrapper = useRef<HTMLDivElement>(null);
-  const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
   const strValue = isMultiSelect ? value?.[0] : value;
@@ -247,91 +259,84 @@ export function Select<Value>(
   const showedStringValue =
     areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
 
+  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
+
+  const hasContentInDropdown =
+    // Есть опции
+    (filteredOptions.length > 0 ||
+      // Дефолтная опция
+      (defaultOptionLabel !== undefined && !hasEnoughSymbolsToSearch) ||
+      // Текст "Загрузка..."
+      inputProps.isLoading ||
+      // Текст "Совпадений не найдено"
+      noMatchesLabel !== undefined ||
+      // У нас есть инпут с поиском внутри листа
+      hasSearchInputInList) &&
+    // Последняя проверка на случай, если мы че то ищем в опциях
+    (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
+
+  const isDropdownDisabled = isDisabled || isReadonly || !hasContentInDropdown;
+  const isDropdownActive = isDropdownOpen && !isDropdownDisabled;
+
   const convertToId = useCallback(
     (v: Value) => (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(v),
     [convertValueToId, convertValueToString],
   );
 
-  const closeList = useCallback(() => {
-    setIsListOpen(false);
+  const reset = () => {
     setSearchValue('');
     setShouldShowDefaultOption(true);
-  }, [dropdownOptions?.shouldUsePopper]);
-
-  const handleListClose = useCallback(
-    (event: Event | SyntheticEvent) => {
-      if (!isListOpen) {
-        return;
-      }
-
-      closeList();
-      onBlur?.(event);
-    },
-    [isListOpen, closeList, onBlur],
-  );
-
-  const handleListOpen = () => {
-    if (!isReadonly && !isListOpen) {
-      setIsListOpen(true);
-    }
   };
 
-  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    onFocus?.(event);
-    handleListOpen();
+  const handleChange = (
+    newValue: Value | IMultipleSelectValue<Value> | undefined,
+    event: IChangeSelectEvent,
+  ) => {
+    // Тут беда с типами, сорри
+    if (!compareValuesOnChange(value as never, newValue as never)) {
+      onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
+    }
   };
 
-  const handleOnClick = () => {
-    handleListOpen();
+  const handleOptionSelect = (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
+    if (!isMultiSelect) {
+      setIsDropdownOpen(false);
+      event.stopPropagation();
+    }
+    handleChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
+    reset();
+    input.current?.blur();
   };
 
-  const handleChange = useCallback(
-    (newValue: Value | IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => {
-      // Тут беда с типами, сорри
-      if (!compareValuesOnChange(value as never, newValue as never)) {
-        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
-      }
-    },
-    [value, compareValuesOnChange, onChange],
-  );
-
-  const handleOptionSelect = useCallback(
-    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
-      handleListClose(event);
-      input.current?.blur();
-    },
-    [handleChange, handleListClose, filteredOptions],
-  );
-
   // MultiSelect
-  const handleToggleOptionCheckbox = useCallback(
-    (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => {
-      if (!isMultiSelect) {
-        return;
-      }
+  const handleToggleOptionCheckbox = (
+    index: number,
+    isSelected: boolean,
+    event: ChangeEvent<HTMLElement> | KeyboardEvent,
+  ) => {
+    if (!isMultiSelect) {
+      return;
+    }
 
-      // Если выбрана не дефолтная опция, которая сетит андеф
-      if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
-        handleChange(undefined, event);
-        return;
-      }
-      if (index === ALL_OPTION_INDEX && isSelected) {
-        handleChange(availableOptions as IMultipleSelectValue<Value>, event);
-        return;
-      }
-      const option = filteredOptions[index];
-      handleChange(
-        isSelected
-          ? // Добавляем
-            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
-          : // Убираем
-            value?.filter((o) => convertToId(o) !== convertToId(option)),
-        event,
-      );
-    },
-    [isMultiSelect, filteredOptions, handleChange, value, availableOptions, convertToId],
-  );
+    // Если выбрана не дефолтная опция, которая сетит андеф
+    if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
+      handleChange(undefined, event);
+      return;
+    }
+    if (index === ALL_OPTION_INDEX && isSelected) {
+      handleChange(availableOptions as IMultipleSelectValue<Value>, event);
+      return;
+    }
+    const option = filteredOptions[index];
+    handleChange(
+      isSelected
+        ? // Добавляем
+          ([...(value ?? []), option] as IMultipleSelectValue<Value>)
+        : // Убираем
+          value?.filter((o) => convertToId(o) !== convertToId(option)),
+      event,
+    );
+  };
 
   const handleOnType = useCallback(
     async (v: string) => {
@@ -374,7 +379,7 @@ export function Select<Value>(
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    if (!isListOpen) {
+    if (!isDropdownActive) {
       return;
     }
 
@@ -384,6 +389,10 @@ export function Select<Value>(
     );
 
     switch (event.code) {
+      case 'Escape':
+      case 'Tab':
+        setIsDropdownOpen(false);
+        break;
       case 'Enter':
       case 'NumpadEnter': {
         let indexToSelect = focusedListCellIndex;
@@ -433,78 +442,27 @@ export function Select<Value>(
     }
   };
 
-  const onArrowClick = () => {
-    if (isListOpen) {
+  const handleArrowClick = (event: IClickHandlerEvent) => {
+    if (isDropdownActive) {
       input.current?.blur();
-      closeList();
+      setIsDropdownOpen(false);
     } else {
       input.current?.focus();
+      event.stopPropagation();
     }
   };
 
-  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
-
-  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
-
-  const isOpen =
-    // Пользователь пытается открыть лист
-    isListOpen &&
-    // Нам есть что показать:
-    // Есть опции
-    (filteredOptions.length > 0 ||
-      // Дефолтная опция
-      (defaultOptionLabel !== undefined && !hasEnoughSymbolsToSearch) ||
-      // Текст "Загрузка..."
-      inputProps.isLoading ||
-      // Текст "Совпадений не найдено"
-      noMatchesLabel !== undefined ||
-      // У нас есть инпут с поиском внутри листа
-      hasSearchInputInList) &&
-    // Последняя проверка на случай, если мы че то ищем в опциях
-    (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
-
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
-    // например minSymbolsCount
-    if (isListOpen && !isOpen) {
-      handleListClose(event);
-      return;
-    }
-
-    if (
-      !isNotEmpty(event.relatedTarget) ||
-      !isNotEmpty(list.current) ||
-      !isNotEmpty(inputWrapper.current)
-    ) {
-      return;
-    }
-
-    const isActionInsideSelect =
-      hasExactParent(event.relatedTarget, list.current) ||
-      hasExactParent(event.relatedTarget, inputWrapper.current);
-
-    // Ничего не делаем, если клик был внутри селекта
-    if (!isActionInsideSelect) {
-      handleListClose(event);
-    }
-  };
-
-  // Эти значения ставятся в false по дефолту также в useDropdown
   const {
-    shouldUsePopper = false,
+    placement = 'bottom-start',
+    popupOffset = 4,
     shouldRenderInBody = false,
     shouldHideOnScroll = false,
+    isMinWidthSameAsTrigger = true,
+    canBeFlipped = false,
+    flipOptions,
+    middlewares,
   } = dropdownOptions ?? {};
 
-  const popperData = useDropdown({
-    isOpen,
-    onDropdownClose: handleListClose,
-    referenceElement: inputWrapper.current,
-    dropdownElement: list.current,
-    options: dropdownOptions,
-    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
-  });
-
   useEffect(() => {
     const focusedCellIndex = isNotEmpty(strValue)
       ? optionsIndexesForNavigation.find((index) => {
@@ -516,11 +474,13 @@ export function Select<Value>(
     setFocusedListCellIndex(focusedCellIndex ?? optionsIndexesForNavigation[0]);
   }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
 
-  useEffect(() => {
-    if (isOpen) {
+  useDidMountEffect(() => {
+    if (isDropdownActive) {
       onOpen?.();
+    } else {
+      onClose?.();
     }
-  }, [isOpen]);
+  }, [isDropdownActive, onClose, onOpen]);
 
   const searchInputEl = hasSearchInputInList && (
     <SearchInput
@@ -542,19 +502,98 @@ export function Select<Value>(
     </>
   );
 
-  const listEl = (
-    <div
-      className={clsx(classes.listWrapper, {
-        [classes.withoutPopper]: !shouldUsePopper,
-        [classes.listWrapperInBody]: shouldRenderInBody,
-      })}
-      ref={list}
-      style={popperData?.styles.popper as CSSProperties}
-      tabIndex={0}
-      onBlur={handleBlur} // обработка для Tab из списка
-      {...popperData?.attributes.popper}
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    if (isDisabled) {
+      return;
+    }
+    onFocus?.(event);
+
+    if (isDropdownDisabled) {
+      return;
+    }
+    setIsDropdownOpen(true);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (isDropdownActive) {
+      return;
+    }
+    reset();
+    onBlur?.(event);
+  };
+
+  const renderTrigger: IWithPopupProps['trigger'] = (
+    <div className={classes.root} onKeyDown={handleKeyDown}>
+      <div className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}>
+        <InputBase
+          ref={input}
+          value={
+            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
+          }
+          size={size}
+          isActive={isDropdownOpen || isActive}
+          isReadonly={hasReadonlyInput}
+          isDisabled={isDisabled}
+          isLoading={areOptionsLoading}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          tweakStyles={tweakInputStyles}
+          testId={testId}
+          endIcon={[
+            isMultiSelect && shouldShowMultiSelectCounter
+              ? ({
+                  key: 'counter',
+                  iconComponent: <div className={classes.counter}>(+{value.length - 1})</div>,
+                  shouldResetSize: true,
+                } satisfies IControlWrapperIcon)
+              : undefined,
+
+            ...getArray(endIcon),
+
+            isNotEmpty(dropdownIcon)
+              ? ({
+                  key: 'arrow',
+                  onClick: handleArrowClick,
+                  tabIndex: undefined,
+                  iconComponent: (
+                    <div className={clsx(classes.arrow, { [classes.activeArrow]: isDropdownOpen })}>
+                      {renderIcon(dropdownIcon)}
+                    </div>
+                  ),
+                } satisfies IControlWrapperIcon)
+              : undefined,
+          ].filter(isNotEmpty)}
+          {...inputProps}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <WithMessages
+      errorMessage={errorMessage}
+      infoMessage={infoMessage}
+      tweakStyles={tweakWithMessagesStyles}
+      testId={getTestId(testId, 'wrapper')}
     >
-      {isOpen && (
+      <WithPopup
+        state={isDropdownOpenState}
+        isDisabled={isDropdownDisabled}
+        placement={placement}
+        popupOffset={popupOffset}
+        shouldRenderInBody={shouldRenderInBody}
+        shouldHideOnScroll={shouldHideOnScroll}
+        isMinWidthSameAsTrigger={isMinWidthSameAsTrigger}
+        canBeFlipped={canBeFlipped}
+        flipOptions={flipOptions}
+        middlewares={middlewares}
+        isTriggerWrapped
+        clickOptions={{ toggle: false }}
+        transitionOptions={{ duration: 0 }}
+        trigger={renderTrigger}
+        tweakStyles={tweakWithPopupStyles}
+      >
         <SelectList
           options={filteredOptions}
           size={size}
@@ -568,85 +607,18 @@ export function Select<Value>(
           activeValue={value}
           isLoading={inputProps.isLoading}
           loadingLabel={loadingLabel}
-          tweakStyles={tweakSelectListStyles}
-          testId={getTestId(testId, 'list')}
           isMultiSelect={isMultiSelect}
-          // скролл не работает с включеным поппером
-          shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
+          shouldScrollToList={shouldScrollToList && !shouldHideOnScroll}
           isOptionDisabled={isOptionDisabled}
           convertValueToString={convertValueToString}
           convertValueToReactNode={convertValueToReactNode}
           convertValueToId={convertToId}
           onOptionSelect={handleOptionSelect}
           onToggleCheckbox={handleToggleOptionCheckbox}
+          tweakStyles={tweakSelectListStyles}
+          testId={getTestId(testId, 'list')}
         />
-      )}
-    </div>
-  );
-
-  return (
-    <WithMessages
-      errorMessage={errorMessage}
-      infoMessage={infoMessage}
-      tweakStyles={tweakWithMessagesStyles}
-      testId={getTestId(testId, 'wrapper')}
-    >
-      <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
-        <div
-          className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
-          onClick={isDisabled || isReadonly ? undefined : handleOnClick}
-          ref={inputWrapper}
-        >
-          <InputBase
-            value={
-              searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
-            }
-            size={size}
-            onChange={handleInputChange}
-            isActive={isListOpen || isActive}
-            isReadonly={hasReadonlyInput}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            isDisabled={isDisabled}
-            ref={input}
-            isLoading={areOptionsLoading}
-            tweakStyles={tweakInputStyles}
-            testId={testId}
-            endIcon={[
-              isMultiSelect && shouldShowMultiSelectCounter
-                ? ({
-                    key: 'counter',
-                    iconComponent: <div className={classes.counter}>(+{value.length - 1})</div>,
-                    shouldResetSize: true,
-                  } satisfies IControlWrapperIcon)
-                : undefined,
-
-              ...getArray(endIcon),
-
-              isNotEmpty(dropdownIcon)
-                ? ({
-                    key: 'arrow',
-                    onClick: onArrowClick,
-                    tabIndex: undefined,
-                    iconComponent: (
-                      <div className={clsx(classes.arrow, { [classes.activeArrow]: isOpen })}>
-                        {renderIcon(dropdownIcon)}
-                      </div>
-                    ),
-                  } satisfies IControlWrapperIcon)
-                : undefined,
-            ].filter(isNotEmpty)}
-            {...inputProps}
-          />
-        </div>
-        {shouldUsePopper ? (
-          <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
-            <>{listEl}</>
-          </Portal>
-        ) : (
-          <>{isOpen && listEl}</>
-        )}
-      </div>
+      </WithPopup>
     </WithMessages>
   );
 }

package/src/components/Select/components/SelectList/SelectList.styles.ts

@@ -13,6 +13,7 @@ export const useStyles = createThemedStyles('SelectList', {
     padding: [CONTAINER_PADDING, 0],
     fontSize: 16,
     overflow: 'hidden',
+    cursor: 'default',
   },
 
   withListHeader: {

package/src/components/Select/types.ts

@@ -1,9 +1,27 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
 import { IRenderNode } from '../../types';
 import { IChangeInputEvent } from '../Input';
+import { IWithPopupProps } from '../WithPopup';
 
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
 
 export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;
 
 export type ISelectFooter<T> = IRenderNode<{ filteredOptions: T[] }>;
+
+export interface IFloatingDropdownOptions {
+  /** @default 'bottom-start' */
+  placement?: IWithPopupProps['placement'];
+  /** @default 4 */
+  popupOffset?: IWithPopupProps['popupOffset'];
+  /** @default false */
+  shouldRenderInBody?: IWithPopupProps['shouldRenderInBody'];
+  /** @default false */
+  shouldHideOnScroll?: IWithPopupProps['shouldHideOnScroll'];
+  /** @default true */
+  isMinWidthSameAsTrigger?: IWithPopupProps['isMinWidthSameAsTrigger'];
+  /** @default false */
+  canBeFlipped?: IWithPopupProps['canBeFlipped'];
+  flipOptions?: IWithPopupProps['flipOptions'];
+  middlewares?: IWithPopupProps['middlewares'];
+}