@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha20

package/src/components/Input/InputBase.tsx

@@ -15,12 +15,12 @@ import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
 import clsx from 'clsx';
 import {
   addDataTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
-  mergeRefs,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IChangeInputEvent } from './types';
@@ -28,6 +28,7 @@ import { IInputStyles, useStyles } from './Input.styles';
 
 export interface IInputBaseProps
   extends ICommonProps<IInputStyles>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>,
     Pick<
       IControlWrapperProps,
       | 'label'
@@ -38,20 +39,7 @@ export interface IInputBaseProps
       | 'isLoading'
       | 'isDisabled'
       | 'onIconClick'
-    >,
-    Pick<
-      InputHTMLAttributes<HTMLInputElement>,
-      | 'type'
-      | 'inputMode'
-      | 'autoComplete'
-      | 'name'
-      | 'maxLength'
-      | 'tabIndex'
-      | 'placeholder'
-      | 'onFocus'
-      | 'onBlur'
-      | 'onPaste'
-      | 'onKeyDown'
+      | 'size'
     >,
     Pick<
       Partial<ReactInputMaskBaseProps>,
@@ -71,7 +59,7 @@ export interface IInputBaseProps
   isAutoSized?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange(value: string, event: IChangeInputEvent): void;
+  onChange: (value: string, event: IChangeInputEvent) => void;
 }
 
 export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
@@ -96,6 +84,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       units,
       testId,
       tabIndex,
+      shouldAlwaysShowPlaceholder,
       onChange,
       onPaste,
       onFocus,
@@ -105,9 +94,16 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       mask,
       maskPlaceholder,
       alwaysShowMask,
-      shouldAlwaysShowPlaceholder,
       beforeMaskedStateChange,
-      ...controlProps
+      // Пропсы ControlWrapper
+      data,
+      groupPlacement,
+      icon,
+      isLoading,
+      isRequired,
+      size,
+      onIconClick,
+      ...inputProps
     },
     ref,
   ) => {
@@ -123,7 +119,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
     const [unitsWidth, setUnitsWidth] = useState<number>();
 
     const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = mergeRefs([ref, inputRef]);
+    const mergedRef = useMergedRefs([ref, inputRef]);
 
     // Try to guess input-mode if possible
     const inputMode: IInputBaseProps['inputMode'] =
@@ -131,7 +127,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
 
     const hasFocus = isFocused || isActive;
-    const hasValue = isNotEmpty(value) && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasUnits = isReactNodeNotEmpty(units);
     const hasPlaceholder =
       (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
@@ -194,7 +190,8 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange,
-      ...addDataTestId(testId, 'input'),
+      ...addDataTestId(testId),
+      ...inputProps,
     };
 
     useEffect(() => {
@@ -234,11 +231,17 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         isDisabled={isDisabled}
         isFocused={hasFocus}
         isInvalid={isInvalid}
-        hasValue={hasValue || hasPlaceholder}
+        hasValue={hasValue}
         isFullWidth={!isAutoSized}
         tweakStyles={tweakControlWrapperStyles}
         onClear={isClearable && hasValue ? handleInputClear : undefined}
-        {...controlProps}
+        data={data}
+        groupPlacement={groupPlacement}
+        icon={icon}
+        isLoading={isLoading}
+        isRequired={isRequired}
+        onIconClick={onIconClick}
+        size={size}
       >
         {hasUnits || isAutoSized ? (
           <div className={classes.autoSizeWrapper}>{inputContent}</div>

package/src/components/List/List.tsx

@@ -8,7 +8,8 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
-import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { IListItemProps, ListItem } from './components';
+import { IListItem } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
@@ -29,9 +30,11 @@ 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)}>
-      {items.map((item, i) => {
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
           ...item,

package/src/components/List/index.ts

@@ -1,3 +1,4 @@
 export * from './List';
 export type { IListStyles } from './List.styles';
-export { type IListItemStyles, type IListItemProps as IListItem, ListItem } from './components';
+export type { IListItem } from './types';
+export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/src/components/List/types.ts

@@ -0,0 +1,5 @@
+import { IListItemProps } from './components';
+
+export interface IListItem extends IListItemProps {
+  isHidden?: boolean;
+}

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

@@ -9,7 +9,11 @@ export default {
 
 const Template: ComponentStory<typeof NumberInput> = (args) => {
   const [value, setValue] = useState<number>();
-  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+  return (
+    <div style={{ width: 300 }}>
+      <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
 };
 
 export const Default = Template.bind({});

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

@@ -26,7 +26,8 @@ export default {
 const Template: ComponentStory<typeof PhoneInput> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
-    phoneNumber: '1234567890',
+    phoneNumber: '9134567890',
+    countryCode: 'RU',
   });
 
   return <PhoneInput {...args} value={value} onChange={setValue} />;

package/src/components/PhoneInput/PhoneInput.tsx

@@ -76,7 +76,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
+    [value.countryCode, value.dialCode, value.phoneNumber],
   );
 
   const handleClose = () => {
@@ -122,7 +122,10 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {
-          phoneNumber: '',
+          phoneNumber:
+            newPhoneInfo.dialCode !== value.dialCode
+              ? ''
+              : getPhoneObjFromString(phoneWithCode).phoneNumber,
           dialCode: newPhoneInfo.dialCode,
           countryCode: newPhoneInfo.countryCode,
         },

package/src/components/SearchInput/SearchInput.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
+import { forwardRef } from 'react';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IInputProps, Input } from '../Input';
@@ -11,31 +10,23 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  placeholder,
-  value,
-  testId,
-  tweakStyles,
-  data,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, tweakStyles, ...props }, ref) => {
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
 
-  return (
-    <Input
-      value={value}
-      placeholder={placeholder}
-      icon="search"
-      isClearable={isClearable}
-      testId={getTestId(testId, 'input')}
-      tweakStyles={tweakInputStyles}
-      {...props}
-    />
-  );
-};
+    return (
+      <Input
+        ref={ref}
+        icon="search"
+        isClearable={isClearable}
+        tweakStyles={tweakInputStyles}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -63,7 +64,11 @@ export interface ISelectProps<Value>
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: false;
-  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
+  searchInput?: {
+    /** @default false */
+    shouldRenderInList?: boolean;
+    ref?: Ref<HTMLInputElement>;
+  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
   isOptionDisabled?: (option: Value) => boolean;
   onChange: (value: Value | undefined, event: IChangeSelectEvent) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
@@ -248,10 +253,14 @@ export function Select<Value>(
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {
@@ -581,6 +590,7 @@ export function Select<Value>(
       errorMessage={errorMessage}
       infoMessage={infoMessage}
       tweakStyles={tweakWithMessagesStyles}
+      testId={getTestId(testId, 'wrapper')}
     >
       <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div

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

@@ -84,7 +84,7 @@ export function SelectList<Value>({
       })}
     >
       {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
-      <div className={classes.list} {...addDataTestId(testId)}>
+      <div className={classes.list} {...addDataTestId(testId)} tabIndex={-1}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

package/src/components/Status/Status.stories.tsx

@@ -1,18 +1,71 @@
 import { Status } from '.';
 import { ComponentStory } from '@storybook/react';
+import { rgba } from '../../helpers';
+import { IExtendableProps } from '../../types';
 import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
+import { STATUS_SIZES } from './constants';
 import { IStatusStyles } from './Status.styles';
 
+export const STATUS_COLORS = [
+  'green',
+  'teal',
+  'blue',
+  'grey',
+  'orange',
+  'red',
+  'violet',
+  'custom',
+] as const;
+
 export default {
   title: 'Data Display/Status',
   component: Status,
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface IStatusColors extends IExtendableProps<typeof STATUS_COLORS> {}
+}
+
 const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 const customTweakStyles: IStatusStyles = {
+  green: {
+    '--status-background': rgba('#D4E3AC', 0.5),
+    '--status-color': '#6F990F',
+  },
+
+  blue: {
+    '--status-background': rgba('#AABFFC', 0.4),
+    '--status-color': '#4C6EBF',
+  },
+
+  grey: {
+    '--status-background': rgba('#95A0B3', 0.25),
+    '--status-color': '#7A869A',
+  },
+
+  orange: {
+    '--status-background': rgba('#FCD3A9', 0.5),
+    '--status-color': '#E5741C',
+  },
+
+  red: {
+    '--status-background': rgba('#F7949A', 0.25),
+    '--status-color': '#F14D56',
+  },
+
+  teal: {
+    '--status-background': rgba('#8CE3EA', 0.4),
+    '--status-color': '#0092A6',
+  },
+
+  violet: {
+    '--status-background': rgba('#BEABE0', 0.4),
+    '--status-color': '#7450B2',
+  },
+
   custom: {
     '--status-color': '#793472',
     '--status-background': '#F2B9ED',

package/src/components/Status/Status.styles.ts

@@ -1,5 +1,5 @@
-import { rgba } from '../../helpers';
 import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { IStatusColors } from './types';
 
 export const useStyles = createThemedStyles('Status', {
   root: {
@@ -102,42 +102,7 @@ export const useStyles = createThemedStyles('Status', {
     },
   },
 
-  green: {
-    '--status-background': rgba('#D4E3AC', 0.5),
-    '--status-color': '#6F990F',
-  },
-
-  blue: {
-    '--status-background': rgba('#AABFFC', 0.4),
-    '--status-color': '#4C6EBF',
-  },
-
-  grey: {
-    '--status-background': rgba('#95A0B3', 0.25),
-    '--status-color': '#7A869A',
-  },
-
-  orange: {
-    '--status-background': rgba('#FCD3A9', 0.5),
-    '--status-color': '#E5741C',
-  },
-
-  red: {
-    '--status-background': rgba('#F7949A', 0.25),
-    '--status-color': '#F14D56',
-  },
-
-  teal: {
-    '--status-background': rgba('#8CE3EA', 0.4),
-    '--status-color': '#0092A6',
-  },
-
-  violet: {
-    '--status-background': rgba('#BEABE0', 0.4),
-    '--status-color': '#7450B2',
-  },
-
   custom: {},
 });
 
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/src/components/Status/constants.ts

@@ -1,11 +1 @@
-export const STATUS_COLORS = [
-  'green',
-  'teal',
-  'blue',
-  'grey',
-  'orange',
-  'red',
-  'violet',
-  'custom',
-] as const;
 export const STATUS_SIZES = ['xs', 's', 'm'] as const;

package/src/components/Status/index.ts

@@ -1,3 +1,3 @@
 export * from './Status';
-
+export * from './types';
 export type { IStatusStyles } from './Status.styles';

package/src/components/Status/types.ts

@@ -1,5 +1,9 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-
-export type IStatusColor = (typeof STATUS_COLORS)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
 
 export type IStatusSize = (typeof STATUS_SIZES)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IStatusColors extends IDefaultExtendableProps {}
+
+export type IStatusColor = keyof IStatusColors;

package/src/components/TextArea/TextArea.styles.ts

@@ -65,13 +65,9 @@ export const useStyles = createThemedStyles('TextArea', {
   symbolsCountError: {
     color: 'red',
   },
-});
 
-export const controlWrapperStyles: IControlWrapperStyles = {
-  label: {
-    top: 16,
-  },
-};
+  withLabel: {},
+});
 
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,

package/src/components/TextArea/TextArea.tsx

@@ -1,7 +1,16 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 import {
   addDataAttributes,
+  getTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -10,19 +19,19 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
-import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
-    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
-    Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>,
+    Pick<
+      IControlWrapperProps,
+      'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'
+    >,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
   value?: string;
   placeholder?: string;
   /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
   isActive?: boolean;
   /**
    * Должна ли высота и ширина textarea подстраиваться под содержимое
@@ -46,17 +55,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   (
     {
       value = DEFAULT_VALUE,
-      label,
       placeholder,
-      infoMessage,
-      errorMessage,
       name,
       shouldFocusOnMount,
       hasCounter = true,
       shouldTrimAfterMaxLength,
       isAutoSized = true,
       shouldAlwaysShowPlaceholder,
-      isDisabled,
       isActive,
       maxLength,
       rows,
@@ -67,7 +72,17 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
       onPaste,
       onFocus,
       onBlur,
-      ...controlProps
+      // Пропсы WithMessages
+      infoMessage,
+      errorMessage,
+      // Пропсы ControlWrapper
+      label,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      size,
+      groupPlacement,
+      ...textAreaProps
     },
     ref,
   ) => {
@@ -80,7 +95,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     });
 
     const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
       tweakStyles,
       className: 'tweakControlWrapper',
       currentComponentName: 'TextArea',
@@ -89,8 +103,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     const [isFocused, setFocused] = useState(false);
 
     const hasFocus = isFocused || isActive;
-    // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
-    const hasValue = value !== undefined && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasLabel = isReactNodeNotEmpty(label);
     const hasPlaceholder =
       (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
@@ -114,6 +127,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
         errorMessage={errorMessage}
         infoMessage={infoMessage}
         tweakStyles={tweakWithMessagesStyles}
+        testId={getTestId(testId, 'wrapper')}
       >
         <ControlWrapper
           label={label}
@@ -121,12 +135,17 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
           isFocused={hasFocus}
           isDisabled={isDisabled}
           hasValue={hasValue}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          groupPlacement={groupPlacement}
+          size={size}
           isFullWidth
-          testId={testId}
-          {...controlProps}
         >
           <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
+            className={clsx(classes.wrapper, {
+              [classes.autoSized]: isAutoSized,
+              [classes.withLabel]: hasLabel,
+            })}
             {...(isAutoSized && { 'data-value': value })}
           >
             <textarea
@@ -142,7 +161,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
               onFocus={handleFocus}
               onBlur={handleBlur}
               onChange={handleChange}
-              {...addDataAttributes(data, testId, 'control')}
+              autoFocus={shouldFocusOnMount}
+              {...addDataAttributes(data, testId)}
+              {...textAreaProps}
             />
           </div>
         </ControlWrapper>

package/src/components/TextArea/index.ts

@@ -1,3 +1,2 @@
 export * from './TextArea';
-export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';

package/src/components/TextButton/TextButton.styles.ts

@@ -7,6 +7,7 @@ export const useStyles = createThemedStyles('TextButton', {
     alignItems: 'center',
     height: 24,
     padding: 0,
+    position: 'relative',
     background: 'transparent',
     border: 'none',
     borderRadius: 0,

package/src/components/Tooltip/Tooltip.styles.ts

@@ -32,6 +32,8 @@ export const useStyles = createThemedStyles('Tooltip', {
     letterSpacing: 0.2,
   },
 
+  custom: {},
+
   info: {},
 
   error: {

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useStyles, ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   text: ReactNode;
   /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
+  view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
 }