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

package/src/components/Input/InputBase.tsx

@@ -63,193 +63,189 @@ export interface IInputBaseProps
   onChange: (value: string, event: IChangeInputEvent, eventType: 'change' | 'clear') => void;
 }
 
-export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
-  (
-    {
-      value = '',
-      placeholder,
-      label,
-      type = 'text',
-      isDisabled,
-      autoComplete,
-      inputMode: initialInputMode,
-      isReadonly,
-      isInvalid,
-      isActive,
-      isClearable,
-      isAutoSized,
-      name,
-      tweakStyles,
-      maxLength,
-      shouldFocusOnMount,
-      units,
-      testId,
-      tabIndex,
-      shouldAlwaysShowPlaceholder,
-      onChange,
-      onPaste,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      // Пропсы react-input-mask
-      mask,
-      maskPlaceholder,
-      alwaysShowMask,
-      beforeMaskedStateChange,
-      // Пропсы ControlWrapper
-      data,
-      groupPlacement,
-      startIcon,
-      icon,
-      endIcon = icon,
-      isLoading,
-      isRequired,
-      size,
-      children,
-      ...inputProps
+export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(function InputBase(
+  {
+    value = '',
+    placeholder,
+    label,
+    type = 'text',
+    isDisabled,
+    autoComplete,
+    inputMode: initialInputMode,
+    isReadonly,
+    isInvalid,
+    isActive,
+    isClearable,
+    isAutoSized,
+    name,
+    tweakStyles,
+    maxLength,
+    shouldFocusOnMount,
+    units,
+    testId,
+    tabIndex,
+    shouldAlwaysShowPlaceholder,
+    onChange,
+    onPaste,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    // Пропсы react-input-mask
+    mask,
+    maskPlaceholder,
+    alwaysShowMask,
+    beforeMaskedStateChange,
+    // Пропсы ControlWrapper
+    data,
+    groupPlacement,
+    startIcon,
+    icon,
+    endIcon = icon,
+    isLoading,
+    isRequired,
+    size,
+    children,
+    ...inputProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakControlWrapperStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakControlWrapper',
+    currentComponentName: 'Input',
+  });
+
+  const [isFocused, setFocused] = useState(false);
+  const [unitsWidth, setUnitsWidth] = useState<number>();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergedRefs([ref, inputRef]);
+
+  // Try to guess input-mode if possible
+  const inputMode: IInputBaseProps['inputMode'] =
+    initialInputMode ??
+    (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
+
+  const hasFocus = isFocused || isActive;
+  const hasValue = isArrayLikeNotEmpty(value);
+  const hasUnits = isReactNodeNotEmpty(units);
+  const hasPlaceholder =
+    (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
+    isStringNotEmpty(placeholder);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.currentTarget.value, event, 'change');
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
+  // для SmartInput нужен event, иначе onChange не вызовется
+  const handleInputClear = async (event: IClickHandlerEvent) => {
+    // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
+    await onChange('', event, 'clear');
+    inputRef.current?.focus();
+  };
+
+  const unitsRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setUnitsWidth(node?.clientWidth);
     },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakControlWrapperStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakControlWrapper',
-      currentComponentName: 'Input',
-    });
-
-    const [isFocused, setFocused] = useState(false);
-    const [unitsWidth, setUnitsWidth] = useState<number>();
-
-    const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = useMergedRefs([ref, inputRef]);
-
-    // Try to guess input-mode if possible
-    const inputMode: IInputBaseProps['inputMode'] =
-      initialInputMode ??
-      (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
-
-    const hasFocus = isFocused || isActive;
-    const hasValue = isArrayLikeNotEmpty(value);
-    const hasUnits = isReactNodeNotEmpty(units);
-    const hasPlaceholder =
-      (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
-      isStringNotEmpty(placeholder);
-
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event, 'change');
-    };
-
-    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(false);
-      onBlur?.(event);
-    };
-
-    // для SmartInput нужен event, иначе onChange не вызовется
-    const handleInputClear = async (event: IClickHandlerEvent) => {
-      // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event, 'clear');
+    [units],
+  );
+
+  const props: InputHTMLAttributes<HTMLInputElement> = {
+    className: clsx(classes.input, {
+      [classes.withUnits]: hasUnits,
+      [classes.withValue]: hasValue,
+      [classes.withLabel]: isReactNodeNotEmpty(label),
+      [classes.autoSized]: isAutoSized,
+      [classes.focusedInput]: isFocused,
+      [classes.disabledInput]: isDisabled,
+      [classes.invalidInput]: isInvalid,
+    }),
+    style:
+      hasUnits && hasValue ? ({ '--units-width': `${unitsWidth}px` } as CSSProperties) : undefined,
+    value,
+    type,
+    autoComplete,
+    inputMode,
+    disabled: isDisabled,
+    placeholder: hasPlaceholder ? placeholder : undefined,
+    name,
+    maxLength,
+    readOnly: isReadonly,
+    tabIndex,
+    onKeyDown,
+    onPaste,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    ...addDataTestId(testId),
+    ...inputProps,
+  };
+
+  useEffect(() => {
+    // It works much better than autoFocus for mobile devices
+    if (shouldFocusOnMount) {
       inputRef.current?.focus();
-    };
-
-    const unitsRef = useCallback(
-      (node: HTMLDivElement | null) => {
-        setUnitsWidth(node?.clientWidth);
-      },
-      [units],
-    );
-
-    const props: InputHTMLAttributes<HTMLInputElement> = {
-      className: clsx(classes.input, {
-        [classes.withUnits]: hasUnits,
-        [classes.withValue]: hasValue,
-        [classes.withLabel]: isReactNodeNotEmpty(label),
-        [classes.autoSized]: isAutoSized,
-        [classes.focusedInput]: isFocused,
-        [classes.disabledInput]: isDisabled,
-        [classes.invalidInput]: isInvalid,
-      }),
-      style:
-        hasUnits && hasValue
-          ? ({ '--units-width': `${unitsWidth}px` } as CSSProperties)
-          : undefined,
-      value,
-      type,
-      autoComplete,
-      inputMode,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : undefined,
-      name,
-      maxLength,
-      readOnly: isReadonly,
-      tabIndex,
-      onKeyDown,
-      onPaste,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      ...addDataTestId(testId),
-      ...inputProps,
-    };
-
-    useEffect(() => {
-      // It works much better than autoFocus for mobile devices
-      if (shouldFocusOnMount) {
-        inputRef.current?.focus();
-      }
-    }, [shouldFocusOnMount]);
-
-    return (
-      <ControlWrapper
-        label={label}
-        isDisabled={isDisabled}
-        isFocused={hasFocus}
-        isActive={hasPlaceholder}
-        isInvalid={isInvalid}
-        hasValue={hasValue}
-        isFullWidth={!isAutoSized}
-        tweakStyles={tweakControlWrapperStyles}
-        onClear={isClearable && hasValue ? handleInputClear : undefined}
-        data={data}
-        groupPlacement={groupPlacement}
-        startIcon={startIcon}
-        endIcon={endIcon}
-        isLoading={isLoading}
-        isRequired={isRequired}
-        size={size}
+    }
+  }, [shouldFocusOnMount]);
+
+  return (
+    <ControlWrapper
+      label={label}
+      isDisabled={isDisabled}
+      isFocused={hasFocus}
+      isActive={hasPlaceholder}
+      isInvalid={isInvalid}
+      hasValue={hasValue}
+      isFullWidth={!isAutoSized}
+      tweakStyles={tweakControlWrapperStyles}
+      onClear={isClearable && hasValue ? handleInputClear : undefined}
+      data={data}
+      groupPlacement={groupPlacement}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      isLoading={isLoading}
+      isRequired={isRequired}
+      size={size}
+    >
+      <div
+        className={clsx(classes.defaultWrapper, {
+          [classes.autoSizeWrapper]: hasUnits || isAutoSized,
+        })}
       >
-        <div
-          className={clsx(classes.defaultWrapper, {
-            [classes.autoSizeWrapper]: hasUnits || isAutoSized,
-          })}
-        >
-          {isNotEmpty(mask) ? (
-            <InputMask
-              ref={mergedRef as unknown as MutableRefObject<InputMask>}
-              mask={mask}
-              maskPlaceholder={maskPlaceholder}
-              alwaysShowMask={alwaysShowMask}
-              beforeMaskedStateChange={beforeMaskedStateChange}
-              {...props}
-            />
-          ) : (
-            <input ref={mergedRef} {...props} />
-          )}
-
-          {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
-          {hasUnits && hasValue && (
-            <div className={classes.units} ref={unitsRef}>
-              {units}
-            </div>
-          )}
-        </div>
-        {children}
-      </ControlWrapper>
-    );
-  },
-);
+        {isNotEmpty(mask) ? (
+          <InputMask
+            ref={mergedRef as unknown as MutableRefObject<InputMask>}
+            mask={mask}
+            maskPlaceholder={maskPlaceholder}
+            alwaysShowMask={alwaysShowMask}
+            beforeMaskedStateChange={beforeMaskedStateChange}
+            {...props}
+          />
+        ) : (
+          <input ref={mergedRef} {...props} />
+        )}
+
+        {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
+        {hasUnits && hasValue && (
+          <div className={classes.units} ref={unitsRef}>
+            {units}
+          </div>
+        )}
+      </div>
+      {children}
+    </ControlWrapper>
+  );
+});

package/src/components/List/List.tsx

@@ -1,11 +1,10 @@
 import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
 import {
-  addDataTestId,
+  addDataAttributes,
   getTestId,
   isArrayNotEmpty,
   isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
 import { IListItemProps, ListItem } from './components';
@@ -33,7 +32,7 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
   const filteredItems = items.filter(({ isHidden }) => !isHidden);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),

package/src/components/List/components/ListItem/ListItem.tsx

@@ -2,11 +2,10 @@ import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
-  addDataTestId,
+  addDataAttributes,
   isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
 import { ICommonProps } from '../../../../types';
 import { renderIcon, IIcon, Icon } from '../../../Icon';
 import { useStyles, IListItemStyles } from './ListItem.styles';
@@ -51,8 +50,7 @@ export const ListItem: FC<IListItemProps> = ({
           [classes.focused]: isFocused,
         })}
         {...addClickHandler(onClick, !isDisabled)}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, disabled: isDisabled ? true : undefined })}
+        {...addDataAttributes({ ...data, disabled: isDisabled ? true : undefined }, testId)}
       >
         {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
         <span className={classes.content}>{item}</span>

package/src/components/Modal/Modal.tsx

@@ -3,12 +3,11 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   getTestId,
   isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IconButton } from '../IconButton';
@@ -142,8 +141,7 @@ export const Modal: FC<IModalProps> = ({
               [classes.fixedPosition]: position !== 'static',
             })}
             style={{ zIndex }}
-            {...addDataTestId(testId)}
-            {...addDataAttributes(data)}
+            {...addDataAttributes(data, testId)}
           >
             <div
               ref={overlay}

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -71,8 +70,7 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
           [classes.active]: isMenuShown,
         })}
         onClick={!isButtonDisabled ? toggleMenu : undefined}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
+        {...addDataAttributes(data, testId)}
       >
         <div className={classes.icon}>
           <Icon type="menu" />

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,7 +1,6 @@
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import {
@@ -76,8 +75,7 @@ export function MultiSelect<Value = string>({
         isRequired && classes.required,
         isDisabled && classes.disabled,
       )}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {/* Input */}
       <MultiSelectInput

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -63,8 +62,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
             [classes.active]: triggerProps.isActive,
           })}
           disabled={triggerProps.isDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
           {...referenceProps}
         >
           <div className={classes.icon}>

package/src/components/Notification/Notification.tsx

@@ -1,11 +1,11 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
+  addDataAttributes,
   addDataTestId,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { INotificationType } from './types';
@@ -49,8 +49,7 @@ export const Notification: FC<INotificationProps> = ({
         [classes.withTitle]: hasTitle,
         [classes.withText]: hasText,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {hasIcon && (
         <div className={classes.icon}>