@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha31

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { iconsList } from '../Icon';
 import { ISelectProps, Select } from './Select';
 
 interface ObjectValue {
@@ -54,6 +55,8 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+const icons = [undefined, ...Object.keys(iconsList)];
+
 // Максимум не включается, минимум включается
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
@@ -192,6 +195,7 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    icon: { control: 'select', options: icons },
   },
 } as ComponentMeta<typeof SelectWithCustomProps>;
 
@@ -213,6 +217,7 @@ Default.args = {
   isClearable: false,
   isLoading: false,
   debounceTime: 400,
+  icon: undefined,
   // custom options
   shouldUseReactNodes: false,
   valuesType: 'strings',
@@ -225,4 +230,5 @@ Default.args = {
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
+  size: undefined,
 };

package/src/components/Select/Select.styles.ts

@@ -5,7 +5,7 @@ import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
 
-const { CONTROL, Z_INDEX } = dimensions;
+const { Z_INDEX } = dimensions;
 
 export const useStyles = createThemedStyles('Select', {
   root: {
@@ -17,7 +17,6 @@ export const useStyles = createThemedStyles('Select', {
   inputWrapper: {
     width: '100%',
     cursor: 'text',
-    position: 'relative',
   },
 
   listWrapper: {
@@ -40,20 +39,16 @@ export const useStyles = createThemedStyles('Select', {
   },
 
   arrow: {
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    width: 20,
-    height: 20,
+    width: 'var(--icon-inner-size, 20px)',
+    height: 'var(--icon-inner-size, 20px)',
     cursor: 'pointer',
-    transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
     transitionProperty: 'transform',
     zIndex: Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   activeArrow: {
-    transform: 'translateY(-50%) rotate(180deg)',
+    transform: 'rotate(180deg)',
   },
 
   disabled: {
@@ -62,45 +57,15 @@ export const useStyles = createThemedStyles('Select', {
     },
   },
 
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: CONTROL.ICON_INNER_SIZE,
-    height: CONTROL.ICON_INNER_SIZE,
-  },
-
-  iconWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
+  counter: {},
 });
 
 const baseInputStyles: IInputStyles = {
-  inputContent: {
-    paddingRight: 32,
-  },
-
   input: {
     '&[readonly]': {
       cursor: 'pointer',
     },
   },
-
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: 40,
-    },
-
-    icon: {
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
-  },
 };
 
 const readonlyInputBaseStyles: IInputStyles = {

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -17,6 +18,7 @@ import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import {
   createFilter,
+  getArray,
   getTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
@@ -63,7 +65,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 +254,14 @@ export function Select<Value>(
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {
@@ -566,21 +576,12 @@ export function Select<Value>(
     </div>
   );
 
-  const multiSelectCounterWithIcon =
-    shouldShowMultiSelectCounter || isNotEmpty(icon) ? (
-      <div className={classes.iconWrapper}>
-        {shouldShowMultiSelectCounter && (
-          <div className={classes.counter}>(+{value.length - 1})</div>
-        )}
-        {isNotEmpty(icon) && <div className={classes.icon}>{renderIcon(icon)}</div>}
-      </div>
-    ) : undefined;
-
   return (
     <WithMessages
       errorMessage={errorMessage}
       infoMessage={infoMessage}
       tweakStyles={tweakWithMessagesStyles}
+      testId={getTestId(testId, 'wrapper')}
     >
       <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div
@@ -602,18 +603,31 @@ export function Select<Value>(
             isLoading={areOptionsLoading}
             tweakStyles={tweakInputStyles}
             testId={testId}
-            icon={isMultiSelect ? multiSelectCounterWithIcon : icon}
+            icon={[
+              isMultiSelect && shouldShowMultiSelectCounter
+                ? {
+                    key: 'counter',
+                    iconComponent: (
+                      <div key="counter" className={classes.counter}>
+                        (+{value.length - 1})
+                      </div>
+                    ),
+                    shouldResetSize: true,
+                  }
+                : undefined,
+
+              ...getArray(icon),
+
+              <div
+                key="arrow"
+                className={clsx(classes.arrow, isOpen && classes.activeArrow)}
+                onClick={onArrowClick} // клик тут, потому что onClick в ControlWrapper добавляет tabIndex={0}
+              >
+                {renderIcon(dropdownIcon)}
+              </div>,
+            ].filter(isNotEmpty)}
             {...inputProps}
           />
-          <div
-            onMouseDown={(event: MouseEvent) => {
-              event.preventDefault();
-            }}
-            onClick={onArrowClick}
-            className={clsx(classes.arrow, isOpen && classes.activeArrow)}
-          >
-            {renderIcon(dropdownIcon)}
-          </div>
         </div>
         {shouldUsePopper ? (
           <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>

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>
         ) : (
@@ -119,8 +119,9 @@ export function SelectList<Value>({
             )}
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
+              const id = convertValueToId(optionValue);
               const isFocused = focusedIndex === i;
-              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              const isActive = activeOptionsIds.has(id);
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
@@ -135,6 +136,7 @@ export function SelectList<Value>({
                   isMultiSelect={isMultiSelect}
                   onOptionSelect={onOptionSelect}
                   onToggleCheckbox={onToggleCheckbox}
+                  data={{ id }}
                 >
                   {opt}
                 </SelectListItem>

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -7,12 +7,13 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { type Classes } from 'jss';
-import { addDataAttributes } from '../../../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
+import { IDataAttributesProps } from '../../../../types';
 import { Checkbox } from '../../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { checkboxStyles } from './SelectListItem.styles';
 
-export interface ISelectListItemProps {
+export interface ISelectListItemProps extends IDataAttributesProps {
   index: number;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -38,6 +39,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
   children,
   isFocused,
   isMultiSelect,
+  data,
   onOptionSelect,
   onToggleCheckbox,
 }) => {
@@ -67,6 +69,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
         disabled: isDisabled,
         active: isActive,
         focused: isFocused,
+        ...data,
       })}
       onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
     >

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.stories.tsx

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { TextArea } from './TextArea';
 
+const COUNTER_POSITIONS = ['default', 'top'] as const;
+
 export default {
   title: 'Inputs/TextArea',
   component: TextArea,
@@ -12,9 +15,14 @@ export default {
   },
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface ITextAreaCounterPositions extends IExtendableProps<typeof COUNTER_POSITIONS> {}
+}
+
 const Template: ComponentStory<typeof TextArea> = (args) => {
   const [value, setValue] = useState('');
-  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
+  return <TextArea {...args} value={value} onChange={setValue} />;
 };
 
 export const Default = Template.bind({});
@@ -26,10 +34,16 @@ Default.args = {
   rows: 5,
   maxLength: 500,
   isInvalid: false,
+  counterPosition: 'default',
   errorMessage: 'Error Text',
   isActive: false,
   isDisabled: false,
   isRequired: false,
   isAutoSized: true,
   shouldAlwaysShowPlaceholder: false,
+  size: undefined,
+};
+
+Default.argTypes = {
+  counterPosition: { options: [undefined, ...COUNTER_POSITIONS], control: 'select' },
 };

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

@@ -1,8 +1,14 @@
 import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
-import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithPrefix } from '../../types';
+import { IControlWrapperSizes, IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
+import { ITextAreaCounterPositions } from './types';
 
 export const useStyles = createThemedStyles('TextArea', {
+  root: {
+    width: '100%',
+  },
+
   textarea: {
     ...helpers.withScrollBar,
     width: '100%',
@@ -65,18 +71,19 @@ export const useStyles = createThemedStyles('TextArea', {
   symbolsCountError: {
     color: 'red',
   },
-});
 
-export const controlWrapperStyles: IControlWrapperStyles = {
-  label: {
-    top: 16,
-  },
-};
+  symbolsCountActive: {},
+
+  'counter-default': {},
+
+  withLabel: {},
+});
 
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,
   {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-  }
+  } & IWithPrefix<ITextAreaCounterPositions, 'counter-'> &
+    IControlWrapperSizes
 >;