@true-engineering/true-react-common-ui-kit 4.0.0-alpha29 → 4.0.0-alpha30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha29",
+  "version": "4.0.0-alpha30",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { Icon, iconsList } from '../Icon';
 import { ControlWrapper } from './ControlWrapper';
 
 export default {
@@ -9,7 +9,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof ControlWrapper> = (args) => (
-  <ControlWrapper {...args} onClear={doNothing} onIconClick={doNothing}>
+  <ControlWrapper {...args} onClear={doNothing}>
     <div style={{ minWidth: 200, height: 48 }} />
   </ControlWrapper>
 );
@@ -24,6 +24,11 @@ Default.args = {
   isLoading: false,
   isDisabled: false,
   hasValue: false,
+  icon: [
+    { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+    { iconComponent: <Icon type="question" /> },
+    { iconComponent: 'search', onClick: () => console.log('search') },
+  ],
 };
 
 Default.argTypes = {

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -4,21 +4,24 @@ import {
   addClickHandler,
   addDataAttributes,
   addDataTestId,
+  getArray,
+  isArrayNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
-  isString,
 } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
+import { IMaybeArray } from '../../theme';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
-import { IControlWrapperSize } from './types';
+import { convertToControlWrapperIcon } from './helpers';
+import { IControlWrapperIcon, IControlWrapperSize } from './types';
 import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
   children: ReactNode;
   label?: ReactNode;
-  icon?: IIcon;
+  icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
   size?: IControlWrapperSize;
   groupPlacement?:
     | 'left'
@@ -44,7 +47,6 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
   isLoading?: boolean;
   /** @default false */
   isDisabled?: boolean;
-  onIconClick?: (event: IClickHandlerEvent) => void;
   onClear?: (event: IClickHandlerEvent) => void;
 }
 
@@ -64,14 +66,15 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   children,
   tweakStyles,
   data,
-  onIconClick,
   onClear,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
+  const icons = getArray(icon).map(convertToControlWrapperIcon);
+
+  const hasIcons = !isLoading && isArrayNotEmpty(icons);
   const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
-  const hasControls = hasEndIcon || hasClearButton || isLoading;
+  const hasControls = hasIcons || hasClearButton || isLoading;
 
   const isActive = isFocused || hasValue;
 
@@ -126,18 +129,20 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
               </div>
             )}
 
-            {hasEndIcon && (
-              <div
-                className={clsx(classes.icon, classes.endIcon, {
-                  [classes.activeIcon]: !isDisabled && isNotEmpty(onIconClick),
-                  [classes.customIcon]: !isString(icon),
-                })}
-                {...addClickHandler(onIconClick, !isDisabled)}
-                {...addDataTestId(testId, 'icon')}
-              >
-                <div className={classes.iconInner}>{renderIcon(icon)}</div>
-              </div>
-            )}
+            {hasIcons &&
+              icons.map(({ key, iconComponent, onClick, shouldResetSize = false }, index) => (
+                <div
+                  key={key ?? index}
+                  className={clsx(classes.icon, classes.endIcon, {
+                    [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+                    [classes.customIcon]: shouldResetSize,
+                  })}
+                  {...addClickHandler(onClick, !isDisabled)}
+                  {...addDataTestId(testId, 'icon')}
+                >
+                  <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
+                </div>
+              ))}
 
             {isLoading && (
               <div

package/src/components/ControlWrapper/helpers.ts

@@ -0,0 +1,11 @@
+import { isObject } from 'lodash-es';
+import { IIcon } from '../Icon';
+import { IControlWrapperIcon } from './types';
+
+export const isControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): iconItem is IControlWrapperIcon => isObject(iconItem) && 'iconComponent' in iconItem;
+
+export const convertToControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): IControlWrapperIcon => (isControlWrapperIcon(iconItem) ? iconItem : { iconComponent: iconItem });

package/src/components/ControlWrapper/index.ts

@@ -1,3 +1,4 @@
 export * from './ControlWrapper';
+export * from './helpers';
 export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

@@ -1,4 +1,16 @@
+import { type Key } from 'react';
+import { IClickHandlerEvent } from '../../types';
+import { IIcon } from '../Icon';
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IControlWrapperSizes {}
 
 export type IControlWrapperSize = keyof IControlWrapperSizes;
+
+// подумать над extend HTMLAttributes<HTMLDivElement>
+export interface IControlWrapperIcon {
+  key?: Key;
+  iconComponent: IIcon;
+  onClick?: (event: IClickHandlerEvent) => void;
+  shouldResetSize?: boolean;
+}

package/src/components/DateInput/DateInput.stories.tsx

@@ -54,7 +54,6 @@ Default.parameters = {
       'onFocus',
       'onBlur',
       'onPaste',
-      'onIconClick',
       'onKeyDown',
     ],
   },

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -96,15 +96,6 @@ Default.argTypes = {
 
 Default.parameters = {
   controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+    exclude: ['data', 'testId', 'tabIndex', 'onFocus', 'onBlur', 'onPaste', 'onKeyDown'],
   },
 };

package/src/components/Input/Input.stories.tsx

@@ -35,12 +35,7 @@ const Template: ComponentStory<typeof Input> = (args) => {
 
   return (
     <div style={{ width: 300 }}>
-      <Input
-        {...args}
-        value={value}
-        onChange={setValue}
-        onIconClick={() => console.log('icon click')}
-      />
+      <Input {...args} value={value} onChange={setValue} />
     </div>
   );
 };

package/src/components/Input/InputBase.tsx

@@ -39,7 +39,6 @@ export interface IInputBaseProps
       | 'isRequired'
       | 'isLoading'
       | 'isDisabled'
-      | 'onIconClick'
     >,
     Pick<
       Partial<ReactInputMaskBaseProps>,
@@ -102,7 +101,6 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       isLoading,
       isRequired,
       size,
-      onIconClick,
       children,
       ...inputProps
     },
@@ -241,7 +239,6 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         icon={icon}
         isLoading={isLoading}
         isRequired={isRequired}
-        onIconClick={onIconClick}
         size={size}
       >
         {hasUnits || isAutoSized ? (

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

@@ -247,4 +247,5 @@ CustomSelect.args = {
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
+  size: undefined,
 };

package/src/components/Select/MultiSelect.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 { IMultipleSelectProps, 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);
@@ -195,6 +198,7 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    icon: { control: 'select', options: icons },
   },
 } as ComponentMeta<typeof SelectWithCustomProps>;
 
@@ -229,4 +233,5 @@ MultiSelect.args = {
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
+  size: undefined,
 };

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

@@ -18,6 +18,7 @@ import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import {
   createFilter,
+  getArray,
   getTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
@@ -575,16 +576,6 @@ 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}
@@ -612,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/TextArea/TextArea.stories.tsx

@@ -41,6 +41,7 @@ Default.args = {
   isRequired: false,
   isAutoSized: true,
   shouldAlwaysShowPlaceholder: false,
+  size: undefined,
 };
 
 Default.argTypes = {