@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.1

package/package.json

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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, ReactNode } from 'react';
+import { useEffect, useState, ReactNode, ChangeEvent, KeyboardEvent } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -24,7 +24,10 @@ export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   value: V;
   /** @default 'right' */
   labelPosition?: 'right' | 'left';
-  onSelect: (value: { value: V; isSelected: boolean }) => void;
+  onSelect: (
+    value: { value: V; isSelected: boolean },
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent,
+  ) => void;
 }
 
 export function Checkbox<V>({
@@ -46,9 +49,9 @@ export function Checkbox<V>({
 
   const hasAction = !isDisabled && !isReadonly;
 
-  const onToggle = () => {
+  const onToggle = (event: ChangeEvent<HTMLInputElement> | KeyboardEvent) => {
     const isSelectedNext = !isSelected;
-    onSelect({ value, isSelected: isSelectedNext });
+    onSelect({ value, isSelected: isSelectedNext }, event);
     setIsSelected(isSelectedNext);
   };
 

package/src/components/NewMoreMenu/NewMoreMenu.styles.ts

@@ -1,9 +1,8 @@
 import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 import { IListStyles } from '../List';
+import { IWithPopupStyles } from '../WithPopup';
 
 export const useStyles = createThemedStyles('NewMoreMenu', {
-  root: {},
-
   hasCircle: {},
 
   button: {
@@ -31,8 +30,9 @@ export const useStyles = createThemedStyles('NewMoreMenu', {
   disabled: {
     cursor: 'default',
   },
-
-  menu: {},
 });
 
-export type INewMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;
+export type INewMoreMenuStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakList: IListStyles; tweakWithPopup: IWithPopupStyles }
+>;

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isArrayNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListItem, List } from '../List';
@@ -34,6 +35,18 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'NewMoreMenu',
+  });
+
   const isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
 
   return (
@@ -43,6 +56,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
       shouldHideOnScroll={shouldHideOnScroll}
       shouldRenderInBody={shouldRenderInBody}
       isDisabled={isButtonDisabled}
+      tweakStyles={tweakWithPopupStyles}
       trigger={({ isActive }) => (
         <button
           className={clsx(classes.button, {
@@ -60,7 +74,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
         </button>
       )}
     >
-      {({ onClose }) => <List items={items} onClick={onClose} />}
+      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
     </WithPopup>
   );
 };

package/src/components/Select/Select.tsx

@@ -9,6 +9,8 @@ import {
   useRef,
   useState,
   SyntheticEvent,
+  ChangeEvent,
+  FormEvent,
 } from 'react';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
@@ -55,14 +57,21 @@ export interface ISelectProps<Value>
   dropdownOptions?: IDropdownWithPopperOptions;
   /** @default 'chevron-down' */
   dropdownIcon?: IIcon;
-  options: Value[];
+  options: Value[] | Readonly<Value[]>;
   value: Value | undefined;
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: boolean;
   searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
   isOptionDisabled?: (option: Value) => boolean;
-  onChange: (value?: Value) => void; // подумать как возвращать индекс
+  onChange: (
+    value: Value | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
   onType?: (value: string) => Promise<void>;
   optionsFilter?: (options: Value[], query: string) => Value[];
@@ -79,7 +88,14 @@ export interface IMultipleSelectProps<Value>
   extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
-  onChange: (value?: IMultipleSelectValue<Value>) => void;
+  onChange: (
+    value: IMultipleSelectValue<Value> | undefined,
+    event:
+      | MouseEvent<HTMLElement>
+      | KeyboardEvent
+      | ChangeEvent<HTMLElement>
+      | FormEvent<HTMLElement>,
+  ) => void;
   compareValuesOnChange?: (
     v1?: IMultipleSelectValue<Value>,
     v2?: IMultipleSelectValue<Value>,
@@ -123,7 +139,8 @@ export function Select<Value>(
   } = props;
   const classes = useStyles({ theme: tweakStyles });
 
-  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
+    searchInput ?? {};
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
   const isMultiSelect = isMultiSelectValue(props, value);
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
@@ -175,7 +192,7 @@ export function Select<Value>(
     const filter =
       optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
 
-    return filter(options, searchValue);
+    return filter(options as Value[], searchValue);
   }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
 
   const availableOptions = useMemo(
@@ -203,7 +220,13 @@ export function Select<Value>(
         return acc;
       }, [] as number[]),
     );
-  }, [filteredOptions]);
+  }, [
+    filteredOptions,
+    hasDefaultOption,
+    isOptionDisabled,
+    shouldShowAllOption,
+    shouldShowDefaultOption,
+  ]);
 
   const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : undefined;
   // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
@@ -267,10 +290,17 @@ export function Select<Value>(
   };
 
   const handleOnChange = useCallback(
-    (newValue: Value | IMultipleSelectValue<Value> | undefined) => {
+    (
+      newValue: Value | IMultipleSelectValue<Value> | undefined,
+      event:
+        | MouseEvent<HTMLElement>
+        | KeyboardEvent
+        | ChangeEvent<HTMLElement>
+        | FormEvent<HTMLElement>,
+    ) => {
       // Тут беда с типами, сорри
       if (!compareValuesOnChange(value as never, newValue as never)) {
-        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined);
+        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined, event);
       }
     },
     [value, compareValuesOnChange, onChange],
@@ -278,7 +308,7 @@ export function Select<Value>(
 
   const handleOptionSelect = useCallback(
     (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index]);
+      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index], event);
       handleListClose(event);
       input.current?.blur();
     },
@@ -287,18 +317,18 @@ export function Select<Value>(
 
   // MultiSelect
   const handleToggleOptionCheckbox = useCallback(
-    (index: number, isSelected: boolean) => {
+    (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => {
       if (!isMultiSelect) {
         return;
       }
 
       // Если выбрана не дефолтная опция, которая сетит андеф
       if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
-        handleOnChange(undefined);
+        handleOnChange(undefined, event);
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
+        handleOnChange(availableOptions as IMultipleSelectValue<Value>, event);
         return;
       }
       const option = filteredOptions[index];
@@ -308,9 +338,10 @@ export function Select<Value>(
             ([...(value ?? []), option] as IMultipleSelectValue<Value>)
           : // Убираем
             value?.filter((o) => convertToId(o) !== convertToId(option)),
+        event,
       );
     },
-    [handleOnChange, filteredOptions, isMultiSelect, value],
+    [isMultiSelect, filteredOptions, handleOnChange, value, availableOptions, convertToId],
   );
 
   const handleOnType = useCallback(
@@ -329,15 +360,15 @@ export function Select<Value>(
         setShouldShowDefaultOption(v === '');
       }
     },
-    [onType, optionsMode],
+    [isMounted, onType, optionsMode],
   );
 
-  const debounceHandleOnType = useCallback(debounce(handleOnType, debounceTime), [
-    handleOnType,
-    debounceTime,
-  ]);
+  const debounceHandleOnType = useMemo(
+    () => debounce(handleOnType, debounceTime),
+    [handleOnType, debounceTime],
+  );
 
-  const handleInputChange = (v: string) => {
+  const handleInputChange = (v: string, event: FormEvent<HTMLElement>) => {
     if (onType !== undefined) {
       debounceHandleOnType(v);
     }
@@ -347,7 +378,7 @@ export function Select<Value>(
     }
 
     if (v === '' && !hasSearchInputInList) {
-      handleOnChange(undefined);
+      handleOnChange(undefined, event);
     }
 
     setSearchValue(v);
@@ -384,7 +415,7 @@ export function Select<Value>(
             isThisValueAlreadySelected =
               value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
           }
-          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
         } else {
           handleOptionSelect(indexToSelect, event);
         }
@@ -488,21 +519,19 @@ export function Select<Value>(
       {isOpen && (
         <SelectList
           options={filteredOptions}
-          defaultOptionLabel={
-            hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : undefined
-          }
-          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
+          defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
+          allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={
-            hasSearchInputInList ? (
+            hasSearchInputInList && (
               <SearchInput
                 value={searchValue}
                 onChange={handleInputChange}
                 tweakStyles={tweakSearchInputStyles}
                 placeholder="Поиск"
-                {...searchInput}
+                {...searchInputProps}
               />
-            ) : undefined
+            )
           }
           noMatchesLabel={noMatchesLabel}
           focusedIndex={focusedListCellIndex}

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

@@ -1,32 +1,31 @@
-import { ReactNode, useMemo, MouseEvent } from 'react';
+import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
-  isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
 import { IMultipleSelectValue } from '../../types';
-import { SelectListItem } from '../SelectListItem';
+import { ISelectListItemProps, SelectListItem } from '../SelectListItem';
 import { useStyles, ISelectListStyles } from './SelectList.styles';
 
-export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles> {
-  options: Value[];
+export interface ISelectListProps<Value>
+  extends ICommonProps<ISelectListStyles>,
+    Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect'> {
+  options: Value[] | Readonly<Value[]>;
   focusedIndex?: number;
   activeValue?: Value | Value[];
   noMatchesLabel?: string;
   isLoading?: boolean;
   loadingLabel?: ReactNode;
   defaultOptionLabel?: ReactNode;
-  allOptionsLabel?: string;
+  allOptionsLabel?: ReactNode;
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
   customListHeader?: ReactNode;
-  onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-  onToggleCheckbox?: (index: number, isSelected: boolean) => void;
   isOptionDisabled: (value: Value) => boolean;
   convertValueToString: (value: Value) => string | undefined;
   convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;
@@ -111,7 +110,7 @@ export function SelectList<Value>({
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
-            {isStringNotEmpty(allOptionsLabel) && (
+            {isReactNodeNotEmpty(allOptionsLabel) && (
               <SelectListItem
                 classes={classes}
                 index={ALL_OPTION_INDEX}

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent, FC } from 'react';
+import { ReactNode, MouseEvent, FC, KeyboardEvent, ChangeEvent } from 'react';
 import clsx from 'clsx';
 import { Classes } from 'jss';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
@@ -16,7 +16,11 @@ export interface ISelectListItemProps {
   children: ReactNode;
   classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
   onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-  onToggleCheckbox?: (index: number, isSelected: boolean) => void;
+  onToggleCheckbox?: (
+    index: number,
+    isSelected: boolean,
+    event: ChangeEvent<HTMLElement> | KeyboardEvent,
+  ) => void;
 }
 
 export const SelectListItem: FC<ISelectListItemProps> = ({
@@ -56,7 +60,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
           isSemiChecked={isSemiChecked}
           isDisabled={isDisabled}
           tweakStyles={checkboxStyles}
-          onSelect={(v) => onToggleCheckbox(index, v.isSelected)}
+          onSelect={(v, event) => onToggleCheckbox(index, v.isSelected, event)}
         >
           {children}
         </Checkbox>

package/src/components/WithPopup/WithPopup.styles.ts

@@ -12,6 +12,10 @@ export const useStyles = createThemedStyles('WithPopup', {
   trigger: {
     cursor: 'pointer',
   },
+
+  popup: {
+    zIndex: 5,
+  },
 });
 
 export type IWithPopupStyles = ITweakStyles<typeof useStyles>;

package/src/components/WithPopup/WithPopup.tsx

@@ -106,6 +106,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
       <div
         className={classes.trigger}
         onClick={eventType === 'click' ? (e) => handleToggle(!isOpen, e) : undefined}
+        {...addDataTestId(testId, 'trigger')}
       >
         {isFunction(Trigger) ? <Trigger isActive={isOpen} /> : Trigger}
       </div>
@@ -114,7 +115,12 @@ export const WithPopup: FC<IWithPopupProps> = ({
         <FloatingPortal
           root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
         >
-          <div style={floatingStyles} ref={refs.setFloating} {...getFloatingProps()}>
+          <div
+            style={floatingStyles}
+            className={classes.popup}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+          >
             {isFunction(Popup) ? <Popup onClose={handleClose} /> : Popup}
           </div>
         </FloatingPortal>