@true-engineering/true-react-common-ui-kit 1.0.1 → 1.1.0

package/dist/types.d.ts

@@ -2,7 +2,7 @@ import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
 import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
 export interface IDataAttributes {
-    [key: string]: string | null | undefined;
+    [key: string]: unknown;
 }
 export interface ICommonProps {
     data?: IDataAttributes;

package/package.json

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

package/src/components/List/List.tsx

@@ -2,7 +2,12 @@ import { FC, Fragment, ReactElement, ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { isNotEmpty, addDataTestId, addDataAttributes } from '../../helpers';
+import {
+  isNotEmpty,
+  getTestId,
+  addDataTestId,
+  addDataAttributes,
+} from '../../helpers';
 import { Icon, IIconType } from '../Icon';
 
 import { ListStyles, styles } from './List.styles';
@@ -53,7 +58,9 @@ export const List: FC<IListProps> = ({
               [classes.disabledItem]: item.disabled,
               [classes.withIconGap]: item.withIconGap,
             })}
-            {...addDataTestId(testId, `item-${idx}`)}
+            {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
+            {...(item.disabled &&
+              addDataAttributes({ disabled: item.disabled }))}
             onClick={item.disabled ? undefined : () => handleItemClick(item)}
           >
             {isNotEmpty(item.icon) && (

package/src/components/Modal/Modal.tsx

@@ -26,7 +26,7 @@ export type IModalPosition = 'center' | 'left' | 'right' | 'static';
 
 export interface IModalProps extends ICommonProps {
   tweakStyles?: ModalStyles;
-  title?: string;
+  title?: ReactNode;
   size?: 'l' | 'm' | 's';
   isFooterSticky?: boolean;
   buttons?: ReactNode[];

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -63,6 +63,8 @@ export const styles = {
     right: 0,
     marginTop: 6,
   },
+
+  tweakList: {},
 };
 
 export type MoreMenuStyles = ComponentStyles<typeof styles>;

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,8 +1,12 @@
+import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
-import React, { FC, useRef, useState } from 'react';
-import { useOnClickOutsideWithRef, useTheme } from '../../hooks';
+import {
+  useTheme,
+  useTweakStyles,
+  useOnClickOutsideWithRef,
+} from '../../hooks';
 import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, addDataTestId, getTestId } from '../../helpers';
 import { IListItem, List } from '../List';
 import { Icon } from '../Icon';
 
@@ -12,66 +16,72 @@ export interface IMoreMenuProps extends ICommonProps {
   tweakStyles?: MoreMenuStyles;
   items: IListItem[];
   isDisabled?: boolean;
-  onMenuOpen?: () => void;
-  onMenuClose?: () => void;
+  /**
+   * @default true
+   */
   hasDefaultStateBackground?: boolean;
   testId?: string;
+  onMenuOpen?(): void;
+  onMenuClose?(): void;
 }
 
 export const MoreMenu: FC<IMoreMenuProps> = ({
   items,
   isDisabled,
+  hasDefaultStateBackground = true,
   data,
+  testId,
   tweakStyles,
   onMenuOpen,
   onMenuClose,
-  hasDefaultStateBackground = true,
-  testId,
 }) => {
-  const { classes } = useTheme('MoreMenu', styles, tweakStyles);
+  const { classes, componentStyles } = useTheme(
+    'MoreMenu',
+    styles,
+    tweakStyles,
+  );
+  const tweakListStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakList',
+  );
 
   const [isMenuShown, setIsMenuShown] = useState(false);
   const list = useRef<HTMLDivElement>(null);
   const button = useRef<HTMLButtonElement>(null);
 
-  const toggleMenu = (event: React.MouseEvent) => {
+  const isButtonDisabled = isDisabled || items.length === 0;
+
+  const toggleMenu = (event: MouseEvent) => {
     const isShown = !isMenuShown;
     event.stopPropagation();
     setIsMenuShown(isShown);
     if (isShown) {
-      if (onMenuOpen !== undefined) {
-        onMenuOpen();
-      }
+      onMenuOpen?.();
     } else {
-      if (onMenuClose !== undefined) {
-        onMenuClose();
-      }
+      onMenuClose?.();
     }
   };
 
   const handleCloseMenu = () => {
     setIsMenuShown(false);
-    if (onMenuClose !== undefined) {
-      onMenuClose();
-    }
+    onMenuClose?.();
   };
 
   useOnClickOutsideWithRef(list, handleCloseMenu, button);
 
-  const isButtonDisabled = isDisabled || items.length === 0;
-
   return (
     <div className={classes.root}>
       <button
+        ref={button}
         className={clsx(classes.button, {
           [classes.hasCircle]: hasDefaultStateBackground,
           [classes.disabled]: isButtonDisabled,
           [classes.active]: isMenuShown,
         })}
-        onClick={!isButtonDisabled ? toggleMenu : undefined}
-        ref={button}
-        data-testid={testId}
+        {...addDataTestId(testId)}
         {...addDataAttributes(data)}
+        onClick={!isButtonDisabled ? toggleMenu : undefined}
       >
         <div className={classes.icon}>
           <Icon type="menu" />
@@ -81,8 +91,9 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
         <div className={classes.menu} ref={list}>
           <List
             items={items}
+            testId={getTestId(testId, 'list')}
+            tweakStyles={tweakListStyles}
             onClick={handleCloseMenu}
-            testId={testId !== undefined ? `${testId}-list` : undefined}
           />
         </div>
       )}

package/src/components/Select/Select.tsx

@@ -22,14 +22,15 @@ import {
   useDropdown,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-
-import { SelectStyles, styles } from './Select.styles';
+import { isNotEmpty } from '../../helpers';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
   getActiveValueIndex,
 } from './helpers';
 
+import { SelectStyles, styles } from './Select.styles';
+
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
   tweakStyles?: SelectStyles;
@@ -46,19 +47,17 @@ export interface ISelectProps<Value>
 
   optionsFilter?: (options: Value[], query: string) => Value[];
   options: Value[];
-  value?: Value;
-  onChange: (value?: Value) => void; // подумать как возвращать индекс
-  compareValuesOnChange?: (
-    v1: Value | undefined,
-    v2: Value | undefined,
-  ) => boolean;
+  value: Value | undefined;
+  shouldScrollToList?: boolean;
+  onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
   // возможно делать какую-то индексацию опций
 
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
-  convertValueToString?: (value?: Value) => string | undefined;
-  convertValueToReactNode?: (value?: Value) => ReactNode | undefined;
-  convertValueToId?: (value?: Value) => string | undefined;
+  convertValueToString?(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
 }
 
 export function Select<Value>({
@@ -85,6 +84,7 @@ export function Select<Value>({
   dropdownOptions,
   minSymbolsCountToOpenList = 0,
   dropdownIcon = 'chevron-down',
+  shouldScrollToList = true,
   ...inputProps
 }: ISelectProps<Value>): JSX.Element {
   const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
@@ -104,6 +104,10 @@ export function Select<Value>({
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
+  const stringValue = isNotEmpty(value)
+    ? convertValueToString(value)
+    : undefined;
+
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
       return options;
@@ -369,7 +373,7 @@ export function Select<Value>({
         ref={inputWrapper}
       >
         <Input
-          value={searchValue !== '' ? searchValue : convertValueToString(value)}
+          value={searchValue !== '' ? searchValue : stringValue}
           onChange={handleInputChange}
           isActive={isListOpen}
           isReadonly={optionsMode === 'normal'}
@@ -428,7 +432,11 @@ export function Select<Value>({
                   tweakStyles={tweakStyles?.tweakSelectList as Styles}
                   testId={testId !== undefined ? `${testId}-list` : undefined}
                   // скролл не работает с включеным поппером
-                  shouldScrollToList={!shouldUsePopper && !shouldHideOnScroll}
+                  shouldScrollToList={
+                    shouldScrollToList &&
+                    !shouldUsePopper &&
+                    !shouldHideOnScroll
+                  }
                 />
               )}
             </div>

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

@@ -1,9 +1,9 @@
 import React, { ReactNode, useMemo } from 'react';
-import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import clsx from 'clsx';
-
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
+import { isNotEmpty } from '../../../helpers';
 
 import { SelectListStyles, styles } from './SelectList.styles';
 
@@ -19,9 +19,9 @@ export interface ISelectListProps<Value> extends ICommonProps {
   onOptionClick: (index: number) => void;
   testId?: string;
   shouldScrollToList?: boolean;
-  convertValueToString: (value?: Value) => string | undefined;
-  convertValueToReactNode?: (value?: Value) => ReactNode | undefined;
-  convertValueToId?: (value?: Value) => string | undefined;
+  convertValueToString: (value: Value) => string | undefined;
+  convertValueToReactNode?: (value: Value) => ReactNode;
+  convertValueToId?: (value: Value) => string | undefined;
 }
 
 export function isOptionDisabled<Value>(option: Value): boolean {
@@ -51,7 +51,9 @@ export function SelectList<Value>({
   shouldScrollToList = true,
 }: ISelectListProps<Value>): JSX.Element {
   const { classes } = useTheme('SelectList', styles, tweakStyles);
-  const activeValueId = convertValueToId(activeValue);
+  const activeValueId = isNotEmpty(activeValue)
+    ? convertValueToId(activeValue)
+    : undefined;
 
   const convertedToStringOptions = useMemo(
     () => options.map(convertValueToString),

package/src/components/Select/helpers.ts

@@ -1,13 +1,16 @@
+import { isNotEmpty } from '../../helpers';
+
 export const defaultConvertFunction = (v: unknown) =>
   v === undefined ? undefined : String(v);
 
-export const defaultCompareFunction = <Value>(
-  v1: Value | undefined,
-  v2: Value | undefined,
-) => v1 === v2;
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value) =>
+  v1 === v2;
 
 export const getActiveValueIndex = <Value>(
   options: Value[],
   value: Value | undefined,
-  convertFunc: (v?: Value) => string | undefined,
-): number => options.findIndex((o) => convertFunc(o) === convertFunc(value));
+  convertFunc: (v: Value) => string | undefined,
+): number =>
+  isNotEmpty(value)
+    ? options.findIndex((o) => convertFunc(o) === convertFunc(value))
+    : -1;

package/src/components/SmartInput/SmartInput.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, forwardRef} from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { Input, IInputProps } from '../Input';
 import {
   CharactersMap,
@@ -38,140 +38,143 @@ export const SMART_INPUT_REGEX_MAP = {
   benefitCert: /^[a-zA-Z0-9/]*$/i,
 };
 
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(({
-  onChange,
-  isUpperCase,
-  smartType = 'default',
-  regExp,
-  value = '',
-  maxLength,
-  ...rest
-}, ref) => {
-  const [currentValue, setCurrentValue] = useState<string>(
-    getUpperCaseIfNeeded(value),
-  );
-  const [caretPosition, setCaretPosition] = useState<number | null>(null);
-  const [input, setInput] = useState<HTMLInputElement | null>(null);
-  const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-  useEffect(() => {
-    if (
-      input &&
-      input.type !== 'email' &&
-      input.selectionStart !== caretPosition
-    ) {
-      input.selectionStart = caretPosition;
-      input.selectionEnd = caretPosition;
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      onChange,
+      isUpperCase,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(
+      getUpperCaseIfNeeded(value),
+    );
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    useEffect(() => {
+      if (
+        input &&
+        input.type !== 'email' &&
+        input.selectionStart !== caretPosition
+      ) {
+        input.selectionStart = caretPosition;
+        input.selectionEnd = caretPosition;
+      }
+    }, [caretPosition]);
+
+    useEffect(() => {
+      setCurrentValue(getUpperCaseIfNeeded(value));
+    }, [value]);
+
+    function getUpperCaseIfNeeded(str: string) {
+      return isUpperCase ? str.toUpperCase() : str;
     }
-  }, [caretPosition]);
 
-  useEffect(() => {
-    setCurrentValue(getUpperCaseIfNeeded(value));
-  }, [value]);
+    const handleChange = (
+      str: string,
+      event?: React.FormEvent<HTMLInputElement>,
+    ) => {
+      const mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(
+                smartType,
+                smartType !== 'email'
+                  ? CharactersMap
+                  : { ...CharactersMap, '"': '@' },
+                symbol,
+              ),
+        )
+        .filter((symbol) => regex.test(symbol))
+        .join('');
+      const domElement = event?.currentTarget;
+
+      if (domElement) {
+        if (!input) {
+          setInput(domElement);
+        }
+
+        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
+        onChange(getUpperCaseIfNeeded(mappedValue));
+
+        if (mappedValue !== currentValue) {
+          setCaretPosition(domElement.selectionStart);
+        } else {
+          setCaretPosition(
+            domElement.selectionStart ? domElement.selectionStart - 1 : null,
+          );
+        }
+      }
+    };
 
-  function getUpperCaseIfNeeded(str: string) {
-    return isUpperCase ? str.toUpperCase() : str;
-  }
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
 
-  const handleChange = (
-    str: string,
-    event?: React.FormEvent<HTMLInputElement>,
-  ) => {
-    const mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(
-              smartType,
-              smartType !== 'email'
-                ? CharactersMap
-                : { ...CharactersMap, '"': '@' },
-              symbol,
-            ),
-      )
-      .filter((symbol) => regex.test(symbol))
-      .join('');
-    const domElement = event?.currentTarget;
-
-    if (domElement) {
       if (!input) {
         setInput(domElement);
       }
 
-      setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-      onChange(getUpperCaseIfNeeded(mappedValue));
-
-      if (mappedValue !== currentValue) {
-        setCaretPosition(domElement.selectionStart);
-      } else {
-        setCaretPosition(
-          domElement.selectionStart ? domElement.selectionStart - 1 : null,
-        );
+      event.preventDefault();
+      const selectionStart = domElement.selectionStart ?? 0;
+      const selectionEnd = domElement.selectionEnd ?? 0;
+
+      let mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(smartType, TransliterationMap, symbol),
+        )
+        .filter((letter) => regex.test(letter))
+        .join('');
+
+      const newValueLength =
+        mappedValue.length +
+        currentValue.length -
+        (selectionEnd - selectionStart);
+
+      if (
+        maxLength !== undefined &&
+        maxLength >= 0 &&
+        newValueLength > maxLength
+      ) {
+        const validMappedValueLength =
+          mappedValue.length - (newValueLength - maxLength);
+
+        mappedValue = mappedValue.substring(0, validMappedValueLength);
       }
-    }
-  };
-
-  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
-    const str = event.clipboardData.getData('text/plain').split('').join('');
-    const domElement = event.currentTarget;
-
-    if (!input) {
-      setInput(domElement);
-    }
 
-    event.preventDefault();
-    const selectionStart = domElement.selectionStart ?? 0;
-    const selectionEnd = domElement.selectionEnd ?? 0;
-
-    let mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(smartType, TransliterationMap, symbol),
-      )
-      .filter((letter) => regex.test(letter))
-      .join('');
-
-    const newValueLength =
-      mappedValue.length +
-      currentValue.length -
-      (selectionEnd - selectionStart);
-
-    if (
-      maxLength !== undefined &&
-      maxLength >= 0 &&
-      newValueLength > maxLength
-    ) {
-      const validMappedValueLength =
-        mappedValue.length - (newValueLength - maxLength);
-
-      mappedValue = mappedValue.substring(0, validMappedValueLength);
-    }
-
-    const newValue = getUpperCaseIfNeeded(
-      `${currentValue?.substring(
-        0,
-        selectionStart,
-      )}${mappedValue}${currentValue?.substring(
-        selectionEnd,
-      )}`,
+      const newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(
+          0,
+          selectionStart,
+        )}${mappedValue}${currentValue?.substring(selectionEnd)}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
     );
-
-    setCaretPosition(selectionStart + mappedValue.length);
-    setCurrentValue(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Input
-      {...rest}
-      ref={ref}
-      maxLength={maxLength}
-      onChange={handleChange}
-      onPaste={handlePaste}
-      value={currentValue}
-    />
-  );
-});
+  },
+);

package/src/types.ts

@@ -8,7 +8,7 @@ import {
 } from './components';
 
 export interface IDataAttributes {
-  [key: string]: string | null | undefined;
+  [key: string]: unknown;
 }
 
 export interface ICommonProps {