@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/src/components/Input/InputBase.tsx

@@ -0,0 +1,250 @@
+import {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  forwardRef,
+  InputHTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+  mergeRefs,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { IClickHandlerEvent, ICommonProps } from '../../types';
+import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { IChangeInputEvent } from './types';
+import { IInputStyles, useStyles } from './Input.styles';
+
+export interface IInputBaseProps
+  extends ICommonProps<IInputStyles>,
+    Pick<
+      IControlWrapperProps,
+      | 'label'
+      | 'icon'
+      | 'groupPlacement'
+      | 'isInvalid'
+      | 'isRequired'
+      | 'isLoading'
+      | 'isDisabled'
+      | 'onIconClick'
+    >,
+    Pick<
+      InputHTMLAttributes<HTMLInputElement>,
+      | 'type'
+      | 'inputMode'
+      | 'autoComplete'
+      | 'name'
+      | 'maxLength'
+      | 'tabIndex'
+      | 'placeholder'
+      | 'onFocus'
+      | 'onBlur'
+      | 'onPaste'
+      | 'onKeyDown'
+    >,
+    Pick<
+      Partial<ReactInputMaskBaseProps>,
+      'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'
+    > {
+  value?: string;
+  units?: ReactNode;
+  /** @default false */
+  isReadonly?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isClearable?: boolean;
+  /** @default false */
+  shouldFocusOnMount?: boolean;
+  /** @default false */
+  isAutoSized?: boolean;
+  /** @default false */
+  shouldAlwaysShowPlaceholder?: boolean;
+  onChange(value: string, event: IChangeInputEvent): 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,
+      onChange,
+      onPaste,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      // Пропсы react-input-mask
+      mask,
+      maskPlaceholder,
+      alwaysShowMask,
+      shouldAlwaysShowPlaceholder,
+      beforeMaskedStateChange,
+      ...controlProps
+    },
+    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 = mergeRefs([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 = isNotEmpty(value) && value !== '';
+    const hasUnits = isReactNodeNotEmpty(units);
+    const hasPlaceholder =
+      (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
+      isStringNotEmpty(placeholder);
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      onChange(event.currentTarget.value, event);
+    };
+
+    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);
+      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.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, 'input'),
+    };
+
+    useEffect(() => {
+      // It works much better than autoFocus for mobile devices
+      if (shouldFocusOnMount) {
+        inputRef.current?.focus();
+      }
+    }, []);
+
+    const inputContent = (
+      <>
+        {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>
+        )}
+      </>
+    );
+
+    return (
+      <ControlWrapper
+        label={label}
+        isDisabled={isDisabled}
+        isFocused={hasFocus}
+        isInvalid={isInvalid}
+        hasValue={hasValue || hasPlaceholder}
+        isFullWidth={!isAutoSized}
+        tweakStyles={tweakControlWrapperStyles}
+        onClear={isClearable && hasValue ? handleInputClear : undefined}
+        {...controlProps}
+      >
+        {hasUnits || isAutoSized ? (
+          <div className={classes.autoSizeWrapper}>{inputContent}</div>
+        ) : (
+          inputContent
+        )}
+      </ControlWrapper>
+    );
+  },
+);

package/src/components/Input/index.ts

@@ -1,3 +1,4 @@
 export * from './Input';
+export * from './InputBase';
 export * from './types';
 export type { IInputStyles } from './Input.styles';

package/src/components/Input/types.ts

@@ -1,33 +1,4 @@
-import { InputHTMLAttributes } from 'react';
-import { Props as ReactInputMaskBaseProps } from 'react-input-mask';
+import { ChangeEvent } from 'react';
+import { IClickHandlerEvent } from '../../types';
 
-export type IReactInputMaskProps = Pick<
-  Partial<ReactInputMaskBaseProps>,
-  'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'
->;
-
-export type IInputHTMLBaseProps = Pick<
-  InputHTMLAttributes<HTMLInputElement>,
-  | 'maxLength'
-  | 'name'
-  | 'tabIndex'
-  | 'placeholder'
-  | 'type'
-  | 'inputMode'
-  | 'onBlur'
-  | 'onFocus'
-  | 'onInput'
-  | 'onKeyDown'
-  | 'onPaste'
->;
-// Возможно это лучше заменить на
-// Omit< InputHTMLAttributes<HTMLInputElement>,
-// | 'className'
-// | 'value'
-// | 'onChange'
-// | 'disabled'
-// | 'required'
-// | 'autoFocus'
-// | 'readOnly'
-// | 'size'
-// >
+export type IChangeInputEvent = ChangeEvent<HTMLInputElement> | IClickHandlerEvent;

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -1,4 +1,4 @@
-import { colors, helpers, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, helpers, ITweakStyles } from '../../theme';
 import { IButtonStyles } from '../Button';
 import { ICheckboxStyles } from '../Checkbox';
 import { ISearchInputStyles } from '../SearchInput';
@@ -91,10 +91,12 @@ export const useStyles = createThemedStyles('MultiSelectList', {
 
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      height: 40,
+    tweakControlWrapper: {
+      root: {
+        '--control-height': '40px',
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
     },
   },
 };

package/src/components/Notification/Notification.stories.tsx

@@ -3,11 +3,7 @@ import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { INotificationProps, Notification } from './Notification';
 
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
 
@@ -28,7 +24,7 @@ export default {
   },
   argTypes: {
     size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    icon: { options: iconTypes, control: 'select' },
+    icon: { options: icons, control: 'select' },
     type: {
       control: 'inline-radio',
       options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -25,8 +25,6 @@ Default.args = {
   placeholder: 'Placeholder',
   infoMessage: 'Message Info',
   units: 'RUB',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isInvalid: false,
   errorMessage: 'Error Text',
   isDisabled: false,

package/src/components/NumberInput/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, KeyboardEvent, FocusEvent, forwardRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import {
   formatNumber,
@@ -9,7 +9,7 @@ import {
   stringToNumber,
 } from '../../helpers';
 import { useDidMountEffect } from '../../hooks';
-import { Input, IInputProps } from '../Input';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from './helpers';
 
 export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
@@ -25,7 +25,7 @@ export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange
   canBeNegative?: boolean;
   min?: number;
   max?: number;
-  onChange: (value: number | undefined, event?: FormEvent<HTMLInputElement>) => void;
+  onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
@@ -60,10 +60,7 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
       setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
     };
 
-    const handleChange = async (
-      inputValue: string,
-      event: FormEvent<HTMLInputElement>,
-    ): Promise<void> => {
+    const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
       const oldValue = showedValue;
       const target = event.target as HTMLInputElement;
       const defaultCaretPos = target.selectionStart ?? 0;

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -5,8 +5,8 @@ import { iconsList } from '../Icon';
 import { PhoneInput } from './PhoneInput';
 import { IPhoneValue } from './types';
 
-const iconTypes = [undefined, ...Object.keys(iconsList)];
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const icons = [undefined, ...Object.keys(iconsList)];
+const groupPlacements = [undefined, 'left', 'right', 'middle'];
 const borders = [undefined, 'left', 'top', 'right', 'bottom'];
 const errorPositions = ['bottom', 'top'];
 const countryCodes = phoneInfo.map((info) => info.countryCode);
@@ -15,10 +15,10 @@ export default {
   title: 'Inputs/PhoneInput',
   component: PhoneInput,
   argTypes: {
-    iconType: { control: 'select', options: iconTypes },
+    icon: { control: 'select', options: icons },
     errorPosition: { control: 'inline-radio', options: errorPositions },
     border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
+    groupPlacement: { control: 'select', options: groupPlacements },
     defaultCountryCode: { control: 'select', options: countryCodes },
   },
 };
@@ -37,20 +37,16 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Label',
   infoMessage: 'Message Info',
-  border: undefined,
-  iconType: undefined,
+  icon: undefined,
   isInvalid: false,
   errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isActive: false,
   isDisabled: false,
   isRequired: false,
   isReadonly: false,
   isClearable: false,
   isLoading: false,
-  inlineStyle: undefined,
+  groupPlacement: undefined,
 };
 
 Default.parameters = {

package/src/components/PhoneInput/PhoneInput.styles.ts

@@ -1,4 +1,4 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 import { IPhoneInputCountryListStyles } from './components';
 
@@ -9,6 +9,7 @@ export const useStyles = createThemedStyles('PhoneInput', {
     width: '100%',
     position: 'relative',
     boxSizing: 'border-box',
+    zIndex: 0,
   },
 
   countrySelectContainer: {
@@ -16,14 +17,14 @@ export const useStyles = createThemedStyles('PhoneInput', {
     left: 1,
     top: 1,
     width: COUNTRY_SELECT_WIDTH,
-    height: dimensions.CONTROL_HEIGHT - 2,
+    height: dimensions.CONTROL.HEIGHT - 2,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     borderRight: ['solid', 1, colors.BORDER_MAIN],
     transition: 'border-color 0.2s ease-in',
     cursor: 'pointer',
-    zIndex: 2,
+    zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   disabledCountrySelect: {
@@ -64,20 +65,22 @@ export const useStyles = createThemedStyles('PhoneInput', {
   flagListContainer: {
     position: 'absolute',
     width: '100%',
-    top: dimensions.CONTROL_HEIGHT + 6,
+    top: dimensions.CONTROL.HEIGHT + 6,
     left: -1,
     zIndex: 3,
   },
 });
 
 export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    paddingLeft: COUNTRY_SELECT_WIDTH,
-  },
+  tweakControlWrapper: {
+    root: {
+      paddingLeft: COUNTRY_SELECT_WIDTH,
+    },
 
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH,
-  },
+    label: {
+      marginLeft: COUNTRY_SELECT_WIDTH,
+    },
+  }
 };
 
 export type IPhoneInputStyles = ITweakStyles<

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,23 +1,23 @@
-import { FC, useState, useRef, useMemo, MouseEvent, FocusEvent, FormEvent } from 'react';
+import { FC, FocusEvent, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import {
+  addDataAttributes,
+  findCountryByCode,
   getCountryCodeFromPhone,
   getFullPhone,
   getPhoneMask,
   getPhoneObjFromString,
-  findCountryByCode,
-  addDataAttributes,
 } from '../../helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Flag } from '../Flag';
 import { Icon } from '../Icon';
-import { IInputProps, Input } from '../Input';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import { PhoneInputCountryList } from './components';
 import { DEFAULT_VALUE } from './constants';
-import { IPhoneInfo, IPhoneValue } from './types';
-import { useStyles, IPhoneInputStyles, inputStyles } from './PhoneInput.styles';
+import { IChangePhoneInputEvent, IPhoneInfo, IPhoneValue } from './types';
+import { inputStyles, IPhoneInputStyles, useStyles } from './PhoneInput.styles';
 
 export interface IPhoneInputProps
   extends Omit<
@@ -33,10 +33,7 @@ export interface IPhoneInputProps
   noMatchesLabel?: string;
   /** @default { phoneNumber: '', dialCode: '' } */
   value?: IPhoneValue;
-  onChange: (
-    phone: IPhoneValue,
-    event: MouseEvent | KeyboardEvent | FormEvent<HTMLInputElement>,
-  ) => void;
+  onChange: (phone: IPhoneValue, event: IChangePhoneInputEvent) => void;
 }
 
 export const PhoneInput: FC<IPhoneInputProps> = ({
@@ -86,7 +83,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     setIsListOpen(false);
   };
 
-  const handleChange = (inputValue: string, event: FormEvent<HTMLInputElement>) => {
+  const handleChange = (inputValue: string, event: IChangeInputEvent) => {
     // if (event.type === 'change') - нужно из-за InputMask
     // Помимо change, еще могут приходить focus и blur, когда input пустой и тогда происходят неприятные сайд-эффекты
     if (event.type === 'change') {
@@ -121,7 +118,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     }
   };
 
-  const handleSelect = (newPhoneInfo: IPhoneInfo, event: MouseEvent | KeyboardEvent) => {
+  const handleSelect = (newPhoneInfo: IPhoneInfo, event: IChangePhoneInputEvent) => {
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -15,7 +15,7 @@ export const useStyles = createThemedStyles('PhoneInputCountryList', {
 
   searchContainer: {
     width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
+    height: dimensions.CONTROL.HEIGHT,
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
@@ -85,9 +85,11 @@ export const useStyles = createThemedStyles('PhoneInputCountryList', {
 });
 
 export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    border: 'none',
-    height: 'calc(var(--control-height) - 2px)',
+  tweakControlWrapper: {
+    root: {
+      border: 'none',
+      height: 'calc(var(--control-height) - 2px)',
+    },
   },
 
   input: {

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -1,23 +1,23 @@
-import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { phoneInfo } from '../../../../constants';
 import {
   checkSearchStringInCountry,
-  getCountryTextByLocale,
   findCountryIndexByCode,
+  getCountryTextByLocale,
   sortCountriesByLocale,
 } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
-import { Input } from '../../../Input';
+import { IChangeInputEvent, Input } from '../../../Input';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { IPhoneInfo } from '../../types';
 import {
-  useStyles,
-  IPhoneInputCountryListStyles,
   inputStyles,
+  IPhoneInputCountryListStyles,
+  useStyles,
 } from './PhoneInputCountryList.styles';
 
 export interface IPhoneInputCountryListProps
@@ -27,7 +27,7 @@ export interface IPhoneInputCountryListProps
   placeholder: string;
   noMatchesLabel: string;
   closeList: () => void;
-  onChange: (country: IPhoneInfo, event: MouseEvent | KeyboardEvent) => void;
+  onChange: (country: IPhoneInfo, event: IChangeInputEvent | KeyboardEvent) => void;
 }
 
 export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({

package/src/components/PhoneInput/types.ts

@@ -1,3 +1,5 @@
+import { IChangeInputEvent } from '../Input';
+
 export interface IPhoneInfo {
   countryEn: string;
   countryRu: string;
@@ -14,3 +16,5 @@ export interface IPhoneValue {
   dialCode?: string;
   countryCode?: string;
 }
+
+export type IChangePhoneInputEvent = IChangeInputEvent | KeyboardEvent;

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -20,4 +20,5 @@ export const Default = Template.bind({});
 
 Default.args = {
   placeholder: 'Поиск',
+  isAutoSized: false,
 };