@true-engineering/true-react-common-ui-kit 1.3.1 → 1.4.0

package/package.json

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

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -63,6 +63,7 @@ const fetchOptionsMock = [
   'or vee444ee',
 ];
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type ConfigValues = {
   name: string;
   date: IPeriod;

package/src/components/Input/Input.tsx

@@ -9,17 +9,19 @@ import {
   KeyboardEvent,
   ClipboardEvent,
   InputHTMLAttributes,
+  ReactElement,
 } from 'react';
 import clsx from 'clsx';
 import InputMask, { Props as ReactInputMaskProps } from 'react-input-mask';
 
-import { Icon, IIconProps } from '../Icon';
+import { Icon, IIconType } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { useTheme, useTweakStyles } from '../../hooks';
 
 import { InputStyles, styles } from './Input.styles';
+import { renderIcon } from '../../helpers/snippets';
 
 export const DEFAULT_SIZE = 6;
 
@@ -70,7 +72,7 @@ export interface IInputProps extends ICommonProps {
    * @default 6
    */
   defaultSize?: number;
-  iconType?: IIconProps['type'];
+  iconType?: IIconType | ReactElement;
   units?: string;
   name?: string;
   mask?: ReactInputMaskProps['mask'];
@@ -286,7 +288,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
                   })}
                   onClick={!isDisabled ? onIconClick : undefined}
                 >
-                  <Icon type={iconType} />
+                  {renderIcon(iconType)}
                 </div>
               )}
             </div>

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { Select, ISelectProps } from './Select';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { isNotEmpty } from '../../helpers';
 
 interface ObjectValue {
   name: string;
@@ -79,6 +80,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
   shouldUseCustomIsDisabledFunction?: boolean;
+  shouldRenderSearchInputInList?: boolean;
   canBeFlipped?: boolean;
   scrollParent?: 'document' | 'auto';
 }
@@ -91,17 +93,21 @@ function SelectWithCustomProps<T>({
   shouldRenderInBody,
   shouldHideOnScroll,
   shouldUseCustomIsDisabledFunction,
+  shouldRenderSearchInputInList,
   canBeFlipped,
   scrollParent,
+  noMatchesLabel,
   ...rest
 }: ISelectWithCustomProps<T>) {
   const [stringValue, setStringValue] = useState<string>();
   const stringHandler = (newValue?: string) => {
+    console.log('change');
     setStringValue(newValue);
   };
 
   const [objectValue, setObjectValue] = useState<ObjectValue>();
   const objectHandler = (newValue?: ObjectValue) => {
+    console.log('change');
     setObjectValue(newValue);
   };
 
@@ -133,6 +139,10 @@ function SelectWithCustomProps<T>({
     console.log('isOpen');
   };
 
+  const handleBlur = () => {
+    console.log('blur');
+  };
+
   useEffect(() => {
     const api = async () => {
       setDynamicOptions(await getOptions());
@@ -172,9 +182,14 @@ function SelectWithCustomProps<T>({
     <Select
       {...rest}
       {...(props as unknown as ISelectProps<any>)}
+      {...(shouldRenderSearchInputInList && {
+        searchInput: { shouldRenderInList: true },
+      })}
+      noMatchesLabel={isNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}
+      onBlur={handleBlur}
       dropdownOptions={{
         shouldUsePopper,
         shouldRenderInBody,
@@ -236,6 +251,7 @@ Default.args = {
   shouldRenderInBody: false,
   shouldHideOnScroll: false,
   shouldUseCustomIsDisabledFunction: false,
+  shouldRenderSearchInputInList: false,
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',

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

@@ -69,6 +69,17 @@ export const styles = {
   },
 
   tweakSelectList: {},
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        height: 48,
+        borderRadius: 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
 };
 
 export type SelectStyles = ComponentStyles<typeof styles>;

package/src/components/Select/Select.tsx

@@ -8,6 +8,7 @@ import {
   useMemo,
   useRef,
   useState,
+  SyntheticEvent,
 } from 'react';
 import { Styles } from 'jss';
 import clsx from 'clsx';
@@ -22,9 +23,10 @@ import {
   useTheme,
   useOnClickOutsideWithRef,
   useDropdown,
+  useTweakStyles,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-import { isNotEmpty } from '../../helpers';
+import { getTestId, hasExactParent, isNotEmpty } from '../../helpers';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
@@ -32,9 +34,10 @@ import {
   defaultIsOptionDisabled,
 } from './helpers';
 import { SelectStyles, styles } from './Select.styles';
+import { ISearchInputProps, SearchInput } from '../SearchInput';
 
 export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
   tweakStyles?: SelectStyles;
   defaultOptionLabel?: string;
   noMatchesLabel?: string;
@@ -47,8 +50,13 @@ export interface ISelectProps<Value>
   options: Value[];
   value: Value | undefined;
   shouldScrollToList?: boolean;
+  searchInput?: { shouldRenderInList: true } & Pick<
+    ISearchInputProps,
+    'placeholder'
+  >;
   isOptionDisabled?(option: Value): boolean;
   onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  onBlur?(event: Event | SyntheticEvent): void;
   onType?(value: string): Promise<void>;
   optionsFilter?(options: Value[], query: string): Value[];
   onOpen?(): void;
@@ -75,6 +83,7 @@ export function Select<Value>({
   minSymbolsCountToOpenList = 0,
   dropdownIcon = 'chevron-down',
   shouldScrollToList = true,
+  searchInput,
   onChange,
   onFocus,
   onBlur,
@@ -105,6 +114,12 @@ export function Select<Value>({
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
+  const shouldRenderSearchInputInList =
+    searchInput?.shouldRenderInList === true;
+
+  const hasSearchInputInList =
+    optionsMode !== 'normal' && shouldRenderSearchInputInList;
+
   const stringValue = isNotEmpty(value)
     ? convertValueToString(value)
     : undefined;
@@ -132,23 +147,21 @@ export function Select<Value>({
     );
   }, [filteredOptions, value, convertValueToString]);
 
-  const handleListClose = () => {
+  const handleListClose = (event: Event | SyntheticEvent) => {
     setIsListOpen(false);
     setSearchValue('');
     setShouldShowDefaultOption(true);
+    onBlur?.(event);
   };
 
-  const handleListOpen = async () => {
-    if (isListOpen) {
-      return;
+  const handleListOpen = () => {
+    if (!isListOpen) {
+      setIsListOpen(true);
     }
-    setIsListOpen(true);
   };
 
   const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    if (onFocus !== undefined) {
-      onFocus(event);
-    }
+    onFocus?.(event);
     handleListOpen();
   };
 
@@ -157,10 +170,19 @@ export function Select<Value>({
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    if (onBlur !== undefined) {
-      onBlur(event);
+    if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current)) {
+      return;
+    }
+
+    const isActionInsideList = hasExactParent(
+      event.relatedTarget,
+      list.current,
+    );
+
+    // Ниче не делаем если клик был внутри селекта
+    if (!isActionInsideList) {
+      handleListClose(event);
     }
-    handleListClose();
   };
 
   const handleOnChange = useCallback(
@@ -174,10 +196,10 @@ export function Select<Value>({
     [value, onChange],
   );
 
-  const handleOptionClick = useCallback(
-    (index: number) => {
+  const handleOptionSelect = useCallback(
+    (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
       handleOnChange(index === -1 ? undefined : filteredOptions[index]);
-      handleListClose();
+      handleListClose(event);
       input.current?.blur();
     },
     [handleOnChange, filteredOptions],
@@ -216,7 +238,7 @@ export function Select<Value>({
       setShouldShowDefaultOption(v === '');
     }
 
-    if (v === '') {
+    if (v === '' && !hasSearchInputInList) {
       handleOnChange(undefined);
     }
 
@@ -241,7 +263,7 @@ export function Select<Value>({
           indexToClick = 0;
         }
 
-        handleOptionClick(indexToClick);
+        handleOptionSelect(indexToClick, event);
         break;
       }
 
@@ -307,24 +329,31 @@ export function Select<Value>({
     }
   };
 
-  useOnClickOutsideWithRef(
-    list,
-    () => {
-      handleListClose();
-    },
-    inputWrapper,
-  );
+  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
+
+  const hasEnoughSymbolsToSearch =
+    searchValue.trim().length >= minSymbolsCountToOpenList;
 
   const isOpen =
+    // Пользователь пытается открыть лист
     isListOpen &&
-    (inputProps.isLoading ||
-      filteredOptions.length > 0 ||
-      (defaultOptionLabel !== undefined && searchValue === '') ||
-      noMatchesLabel !== undefined) &&
-    searchValue.trim().length >= minSymbolsCountToOpenList;
+    // Нам есть что показать:
+    // Есть опции
+    (filteredOptions.length > 0 ||
+      // Дефолтная опция
+      (defaultOptionLabel !== undefined && !hasEnoughSymbolsToSearch) ||
+      // Текст "Загрузка..."
+      inputProps.isLoading ||
+      // Текст "Совпадений не найдено"
+      noMatchesLabel !== undefined ||
+      // У нас есть инпут с поиском внутри листа
+      hasSearchInputInList) &&
+    // Последняя проверка на случай, если мы че то ищем в опциях
+    (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
   const { isReadonly = true } = inputProps;
-  const shouldUsePointerCursor = optionsMode === 'normal' && isReadonly;
+  const shouldUsePointerCursor =
+    (optionsMode === 'normal' || shouldRenderSearchInputInList) && isReadonly;
 
   const tweakInputStyles = useMemo(
     () =>
@@ -341,6 +370,12 @@ export function Select<Value>({
     [tweakStyles?.tweakInput, shouldUsePointerCursor],
   );
 
+  const tweakSearchInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSearchInput',
+  );
+
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
     shouldUsePopper = false,
@@ -373,9 +408,8 @@ export function Select<Value>({
         [classes.listWrapperInBody]: shouldRenderInBody,
       })}
       ref={list}
-      // чтобы предотвратить onBlur на инпуте
-      onMouseDown={(event) => event.preventDefault()}
       style={popperData?.styles.popper as Styles}
+      onBlur={handleBlur} // обработка для Tab из списка
       {...popperData?.attributes.popper}
     >
       {isOpen && (
@@ -386,13 +420,24 @@ export function Select<Value>({
               ? defaultOptionLabel
               : undefined
           }
+          customListHeader={
+            hasSearchInputInList ? (
+              <SearchInput
+                value={searchValue}
+                onChange={handleInputChange}
+                tweakStyles={tweakSearchInputStyles}
+                placeholder="Поиск"
+                {...searchInput}
+              />
+            ) : undefined
+          }
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}
           activeValue={value}
           isLoading={inputProps.isLoading}
           loadingLabel={loadingLabel}
           tweakStyles={tweakStyles?.tweakSelectList as Styles}
-          testId={testId !== undefined ? `${testId}-list` : undefined}
+          testId={getTestId(testId, 'list')}
           // скролл не работает с включеным поппером
           shouldScrollToList={
             shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll
@@ -401,7 +446,7 @@ export function Select<Value>({
           convertValueToString={convertValueToString}
           convertValueToReactNode={convertValueToReactNode}
           convertValueToId={convertValueToId}
-          onOptionClick={handleOptionClick}
+          onOptionClick={handleOptionSelect}
         />
       )}
     </div>
@@ -415,10 +460,14 @@ export function Select<Value>({
         ref={inputWrapper}
       >
         <Input
-          value={searchValue !== '' ? searchValue : stringValue}
+          value={
+            searchValue !== '' && !shouldRenderSearchInputInList
+              ? searchValue
+              : stringValue
+          }
           onChange={handleInputChange}
           isActive={isListOpen}
-          isReadonly={optionsMode === 'normal'}
+          isReadonly={optionsMode === 'normal' || shouldRenderSearchInputInList}
           onFocus={handleFocus}
           onBlur={handleBlur}
           isDisabled={isDisabled}

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

@@ -12,6 +12,17 @@ export const styles = {
     boxSizing: 'border-box',
     padding: [CONTAINER_PADDING, 0],
     fontSize: 16,
+    overflow: 'hidden',
+  },
+
+  withListHeader: {
+    paddingTop: 0,
+  },
+
+  listHeader: {
+    '& + $list': {
+      borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    },
   },
 
   list: {

package/src/components/Select/SelectList/SelectList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo, MouseEvent } from 'react';
 import clsx from 'clsx';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
@@ -17,7 +17,8 @@ export interface ISelectListProps<Value> extends ICommonProps {
   defaultOptionLabel?: string;
   testId?: string;
   shouldScrollToList?: boolean;
-  onOptionClick(index: number): void;
+  customListHeader?: ReactNode;
+  onOptionClick(index: number, event: MouseEvent<HTMLElement>): void;
   isOptionDisabled(value: Value): boolean;
   convertValueToString(value: Value): string | undefined;
   convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
@@ -37,6 +38,7 @@ export function SelectList<Value>({
   tweakStyles,
   testId,
   shouldScrollToList = true,
+  customListHeader,
   isOptionDisabled,
   onOptionClick,
   convertValueToString,
@@ -66,8 +68,13 @@ export function SelectList<Value>({
   return (
     <ScrollIntoViewIfNeeded
       active={shouldScrollToList}
-      className={classes.root}
+      className={clsx(classes.root, {
+        [classes.withListHeader]: isNotEmpty(customListHeader),
+      })}
     >
+      {isNotEmpty(customListHeader) && (
+        <div className={classes.listHeader}>{customListHeader}</div>
+      )}
       <div className={classes.list} data-testid={testId}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>
@@ -84,7 +91,7 @@ export function SelectList<Value>({
                   classes.defaultCell,
                   focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
                 )}
-                onClick={() => onOptionClick(DEFAULT_OPTION_INDEX)}
+                onClick={(event) => onOptionClick(DEFAULT_OPTION_INDEX, event)}
               >
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
@@ -111,7 +118,9 @@ export function SelectList<Value>({
                     active: isActive,
                     focused: isFocused,
                   })}
-                  onClick={!isDisabled ? () => onOptionClick(i) : undefined}
+                  onClick={
+                    !isDisabled ? (event) => onOptionClick(i, event) : undefined
+                  }
                 >
                   {opt}
                 </ScrollIntoViewIfNeeded>

package/src/helpers/snippets.tsx

@@ -0,0 +1,5 @@
+import { Icon, IIconType } from '../components';
+import { ReactElement, ReactNode } from 'react';
+
+export const renderIcon = (icon: IIconType | ReactElement): ReactNode =>
+  typeof icon === 'string' ? <Icon type={icon} /> : icon;

package/src/helpers/utils.ts

@@ -11,6 +11,20 @@ export const transformToKebab = (string: string): string => {
   return result;
 };
 
+export const hasExactParent = (element: Element, parent: Element): boolean => {
+  if (element === parent) {
+    return true; // Found the exact parent
+  }
+
+  const parentNode = getParentNode(element);
+
+  if (parentNode === element) {
+    return false; // Reached the top-level HTML element or Shadow DOM host
+  }
+
+  return hasExactParent(parentNode, parent);
+};
+
 export const getParentNode = (element: Element | ShadowRoot): Element =>
   element.nodeName === 'HTML'
     ? (element as Element)

package/src/hooks/use-dropdown.ts

@@ -13,11 +13,11 @@ export const useDropdown = ({
   dependenciesForPositionUpdating = [],
 }: {
   isOpen: boolean;
-  onDropdownClose: () => void;
   referenceElement: VirtualElement | null | undefined;
   dropdownElement: HTMLElement | null | undefined;
   options?: IDropdownWithPopperOptions;
   dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose(event: Event): void;
 }): ReturnType<typeof usePopper> | undefined => {
   const {
     shouldUsePopper = false,