@true-engineering/true-react-common-ui-kit 4.0.0-alpha54 → 4.0.0-alpha61

package/src/components/NumberInput/NumberInput.tsx

@@ -28,107 +28,105 @@ export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange
   onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
 }
 
-export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
-  (
-    {
-      value,
-      canBeFloat = false,
-      canBeNegative = false,
-      defaultValue,
-      precision = 3,
-      intPartPrecision = 7,
-      onChange,
-      onBlur,
-      min,
-      max,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showedValue, setShowedValue] = useState(() =>
-      formatNumberWithDefault(value, defaultValue),
-    );
+export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(function NumberInput(
+  {
+    value,
+    canBeFloat = false,
+    canBeNegative = false,
+    defaultValue,
+    precision = 3,
+    intPartPrecision = 7,
+    onChange,
+    onBlur,
+    min,
+    max,
+    ...props
+  },
+  ref,
+) {
+  const [showedValue, setShowedValue] = useState(() =>
+    formatNumberWithDefault(value, defaultValue),
+  );
 
-    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
-    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
+  // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
+  const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
 
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      setIsDeleteForwardAction(event.key === 'Delete');
-    };
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    setIsDeleteForwardAction(event.key === 'Delete');
+  };
 
-    const setShowedValueWithDefault = (v: string) => {
-      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
-    };
+  const setShowedValueWithDefault = (v: string) => {
+    setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
+  };
 
-    const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
-      const oldValue = showedValue;
-      const target = event.target as HTMLInputElement;
-      const defaultCaretPos = target.selectionStart ?? 0;
-      const numString = removeStringFormat(inputValue);
+  const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
+    const oldValue = showedValue;
+    const target = event.target as HTMLInputElement;
+    const defaultCaretPos = target.selectionStart ?? 0;
+    const numString = removeStringFormat(inputValue);
 
-      if (numString === '') {
-        onChange(undefined);
-        // не убирать - ломается каретка
-        setShowedValue('');
-        return;
-      }
+    if (numString === '') {
+      onChange(undefined);
+      // не убирать - ломается каретка
+      setShowedValue('');
+      return;
+    }
 
-      const numberRegexp = new RegExp(
-        constructRegExp({
-          precision,
-          intPartPrecision,
-          canBeNegative,
-          canBeFloat,
-        }),
-      );
+    const numberRegexp = new RegExp(
+      constructRegExp({
+        precision,
+        intPartPrecision,
+        canBeNegative,
+        canBeFloat,
+      }),
+    );
 
-      if (!numberRegexp.test(numString)) {
-        await setShowedValue(oldValue);
-        setCaretPosition(target, defaultCaretPos - 1);
-        return;
-      }
+    if (!numberRegexp.test(numString)) {
+      await setShowedValue(oldValue);
+      setCaretPosition(target, defaultCaretPos - 1);
+      return;
+    }
 
-      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
-      const formattedValue = formatStringNumber(numString);
-      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
-      await setShowedValue(newValue);
-      setCaretPosition(
-        target,
-        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
-      );
-    };
+    const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
+    const formattedValue = formatStringNumber(numString);
+    const newValue = hasDot ? `${formattedValue}.` : formattedValue;
+    await setShowedValue(newValue);
+    setCaretPosition(
+      target,
+      getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
+    );
+  };
 
-    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
-      const val = event.currentTarget.value;
-      const num = stringToNumber(val);
-      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
-      if (newValue !== value) {
-        onChange(newValue);
-      } else {
-        setShowedValueWithDefault(formatNumber(value));
-      }
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
+  const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
+    const val = event.currentTarget.value;
+    const num = stringToNumber(val);
+    const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
+    if (newValue !== value) {
+      onChange(newValue);
+    } else {
+      setShowedValueWithDefault(formatNumber(value));
+    }
+    if (onBlur !== undefined) {
+      onBlur(event);
+    }
+  };
 
-    useDidMountEffect(() => {
-      if (value !== undefined) {
-        setShowedValueWithDefault(formatNumber(value));
-      } else {
-        setShowedValue(formatNumber(value));
-      }
-    }, [value]);
+  useDidMountEffect(() => {
+    if (value !== undefined) {
+      setShowedValueWithDefault(formatNumber(value));
+    } else {
+      setShowedValue(formatNumber(value));
+    }
+  }, [value]);
 
-    return (
-      <Input
-        value={showedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <Input
+      value={showedValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,8 +1,7 @@
 import { FC, FocusEvent, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
 import {
-  addDataAttributes,
   findCountryByCode,
   getCountryCodeFromPhone,
   getFullPhone,
@@ -157,7 +156,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   useOnClickOutsideWithRef(list, handleClose, inputWrapper);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div
         className={clsx(classes.countrySelectContainer, {
           [classes.disabledCountrySelect]: isDisabled,

package/src/components/SearchInput/SearchInput.tsx

@@ -10,23 +10,24 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
-  ({ isClearable = true, tweakStyles, ...props }, ref) => {
-    const tweakInputStyles = useTweakStyles({
-      innerStyles: inputStyles,
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'SearchInput',
-    });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(function SearchInput(
+  { isClearable = true, tweakStyles, ...props },
+  ref,
+) {
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
 
-    return (
-      <Input
-        ref={ref}
-        startIcon="search"
-        isClearable={isClearable}
-        tweakStyles={tweakInputStyles}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <Input
+      ref={ref}
+      startIcon="search"
+      isClearable={isClearable}
+      tweakStyles={tweakInputStyles}
+      {...props}
+    />
+  );
+});

package/src/components/Select/Select.tsx

@@ -496,7 +496,7 @@ export function Select<Value>(
   const popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
-    referenceElement: input.current?.parentElement ?? inputWrapper.current,
+    referenceElement: inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
     dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],

package/src/components/Selector/Selector.tsx

@@ -2,12 +2,11 @@ import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
-  getTestId,
+  addDataAttributes,
   hasDuplicates,
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { renderIcon } from '../Icon';
 import { ISelectorOption, ISelectorValue } from './types';
@@ -77,8 +76,7 @@ export function Selector<V extends ISelectorValue>({
         [classes.autoWidth]: hasSameOptionsWidth,
       })}
       ref={listRef}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {isNotEmpty(activeElementData) && (
         <div className={classes.line} style={getSelectorLineStyle(activeElementData)} />
@@ -90,7 +88,7 @@ export function Selector<V extends ISelectorValue>({
         const isActiveOption = option.value === value;
 
         return (
-          <div key={optionId} className={classes.optionWrapper} {...addDataTestId(testId)}>
+          <div key={optionId} className={classes.optionWrapper}>
             <button
               type="button"
               className={clsx(classes.option, classes[size], {
@@ -99,7 +97,7 @@ export function Selector<V extends ISelectorValue>({
               })}
               disabled={isDisabledOption}
               onClick={!isDisabledOption ? () => onChange(option.value) : undefined}
-              {...addDataTestId(getTestId(testId, optionId))}
+              {...addDataTestId(testId, optionId)}
             >
               {isReactNodeNotEmpty(option.icon) && (
                 <div className={classes.optionIcon}>{renderIcon(option.icon)}</div>

package/src/components/SmartInput/SmartInput.tsx

@@ -26,91 +26,89 @@ export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
   ) => void;
 }
 
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      value = '',
-      smartType = 'default',
-      regExp,
-      maxLength,
-      isUpperCase = false,
-      isTransliterationEnabled = true,
-      onChange,
-      ...rest
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = useMergedRefs([ref, inputRef]);
-
-    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-    const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
-
-    const updateCaretPosition = (position: number | null, newValue: string) => {
-      const input = inputRef.current;
-      if (isNotEmpty(input) && input.type !== 'email') {
-        // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
-        input.value = newValue;
-        input.setSelectionRange(position, position);
-      }
-    };
-
-    const handleChange = async (str: string, event: IChangeInputEvent) => {
-      const isValid = regex.test(str);
-
-      const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
-      const newValue = getUpperCaseIfNeeded(
-        isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-
-      const input = inputRef.current;
-      if (isNotEmpty(input)) {
-        const start = input.selectionStart;
-        updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
-      }
-    };
-
-    const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault();
-
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-
-      const input = event.currentTarget;
-      const selectionStart = input.selectionStart ?? 0;
-      const selectionEnd = input.selectionEnd ?? 0;
-
-      const isValid = regex.test(str);
-
-      let mappedValue = isValid
-        ? str
-        : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
-
-      const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
-
-      if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
-        mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
-      }
-
-      const newValue = getUpperCaseIfNeeded(
-        `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-      updateCaretPosition(selectionStart + mappedValue.length, newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={mergedRef}
-        value={value}
-        maxLength={maxLength}
-        onPaste={handlePaste}
-        onChange={handleChange}
-      />
-    );
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(function SmartInput(
+  {
+    value = '',
+    smartType = 'default',
+    regExp,
+    maxLength,
+    isUpperCase = false,
+    isTransliterationEnabled = true,
+    onChange,
+    ...rest
   },
-);
+  ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergedRefs([ref, inputRef]);
+
+  const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+  const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
+
+  const updateCaretPosition = (position: number | null, newValue: string) => {
+    const input = inputRef.current;
+    if (isNotEmpty(input) && input.type !== 'email') {
+      // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
+      input.value = newValue;
+      input.setSelectionRange(position, position);
+    }
+  };
+
+  const handleChange = async (str: string, event: IChangeInputEvent) => {
+    const isValid = regex.test(str);
+
+    const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
+    const newValue = getUpperCaseIfNeeded(
+      isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
+    );
+
+    onChange(newValue, { rawValue: str, isValid }, event);
+
+    const input = inputRef.current;
+    if (isNotEmpty(input)) {
+      const start = input.selectionStart;
+      updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
+    }
+  };
+
+  const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const str = event.clipboardData.getData('text/plain').split('').join('');
+
+    const input = event.currentTarget;
+    const selectionStart = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? 0;
+
+    const isValid = regex.test(str);
+
+    let mappedValue = isValid
+      ? str
+      : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
+
+    const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
+
+    if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
+      mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
+    }
+
+    const newValue = getUpperCaseIfNeeded(
+      `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
+    );
+
+    onChange(newValue, { rawValue: str, isValid }, event);
+    updateCaretPosition(selectionStart + mappedValue.length, newValue);
+  };
+
+  return (
+    <Input
+      {...rest}
+      ref={mergedRef}
+      value={value}
+      maxLength={maxLength}
+      onPaste={handlePaste}
+      onChange={handleChange}
+    />
+  );
+});

package/src/components/Status/Status.tsx

@@ -1,7 +1,9 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { IStatusColor, IStatusSize } from './types';
@@ -34,8 +36,7 @@ export const Status: FC<IStatusProps> = ({
   return (
     <span
       className={clsx(classes.root, classes[size], classes[color])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {isReactNodeNotEmpty(children) && <span className={classes.text}>{children}</span>}
       {isReactNodeNotEmpty(icon) && (

package/src/components/Switch/Switch.styles.ts

@@ -1,10 +1,18 @@
 import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+import { ISwitchSizes } from './types';
 
 export const useStyles = createThemedStyles('Switch', {
   root: {
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
+
+    '--switch-width': '36px',
+    '--switch-height': '20px',
+    '--switch-toggle-width': '16px',
+    '--switch-toggle-height': '16px',
+    '--switch-toggle-padding': 'calc((var(--switch-height) - var(--switch-toggle-height)) / 2)',
+    '--switch-label-gap': '12px',
   },
 
   primary: {},
@@ -20,7 +28,7 @@ export const useStyles = createThemedStyles('Switch', {
 
   checked: {
     '& $switch::before': {
-      left: 18,
+      left: 'calc(var(--switch-width) - var(--switch-toggle-width) - var(--switch-toggle-padding))',
     },
   },
 
@@ -28,25 +36,25 @@ export const useStyles = createThemedStyles('Switch', {
     position: 'relative',
     flexShrink: 0,
     display: 'block',
-    width: 36,
-    height: 20,
-    backgroundColor: '#333',
-    borderRadius: 10,
+    width: 'var(--switch-width)',
+    height: 'var(--switch-height)',
+    borderRadius: 'calc(infinity * 1px)',
     boxSizing: 'border-box',
     transition: animations.defaultTransition,
     transitionProperty: 'opacity, background-color',
+    backgroundColor: '#333',
 
     '&::before': {
       content: '""',
       position: 'absolute',
-      top: 2,
-      left: 2,
+      top: 'var(--switch-toggle-padding)',
+      left: 'var(--switch-toggle-padding)',
+      width: 'var(--switch-toggle-width)',
+      height: 'var(--switch-toggle-height)',
       right: 'auto',
       display: 'block',
-      width: 16,
-      height: 16,
       backgroundColor: '#fff',
-      borderRadius: '50%',
+      borderRadius: 'calc(infinity * 1px)',
       zIndex: 1,
       transition: animations.defaultTransition,
       transitionProperty: 'left, background-color',
@@ -64,12 +72,12 @@ export const useStyles = createThemedStyles('Switch', {
 
   labelLeft: {
     order: -1,
-    marginRight: 12,
+    marginRight: 'var(--switch-label-gap)',
   },
 
   labelRight: {
-    marginLeft: 12,
+    marginLeft: 'var(--switch-label-gap)',
   },
 });
 
-export type ISwitchStyles = ITweakStyles<typeof useStyles>;
+export type ISwitchStyles = ITweakStyles<typeof useStyles, ISwitchSizes>;

package/src/components/Switch/Switch.tsx

@@ -1,9 +1,13 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
-import { ISwitchState } from './types';
+import { ISwitchSize, ISwitchState } from './types';
 import { useStyles, ISwitchStyles } from './Switch.styles';
 
 export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
@@ -19,6 +23,7 @@ export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyl
   labelPosition?: 'left' | 'right';
   /** @default 'primary' */
   color?: 'primary' | 'secondary';
+  size?: ISwitchSize;
   onChange: (state: ISwitchState<V>) => void;
 }
 
@@ -30,6 +35,7 @@ export const Switch = <V extends string>({
   children,
   labelPosition = 'right',
   color = 'primary',
+  size,
   data,
   tweakStyles,
   testId,
@@ -41,13 +47,12 @@ export const Switch = <V extends string>({
 
   return (
     <label
-      className={clsx(classes.root, classes[color], {
+      className={clsx(classes.root, classes[color], isNotEmpty(size) && classes[size], {
         [classes.disabled]: isDisabled,
         [classes.checked]: isChecked,
         [classes.invalid]: isInvalid,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <span className={classes.switch}>
         <input

package/src/components/Switch/types.ts

@@ -2,3 +2,8 @@ export interface ISwitchState<V = string> {
   name: V;
   isEnabled: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ISwitchSizes {}
+
+export type ISwitchSize = keyof ISwitchSizes;