@true-engineering/true-react-common-ui-kit 4.0.0-alpha51 → 4.0.0-alpha53

package/package.json

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

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

@@ -33,7 +33,8 @@ const meta: Meta<typeof Story> = {
     hasValue: false,
     isActive: false,
     isFullWidth: false,
-    icon: [
+    startIcon: [{ iconComponent: 'search' }, { iconComponent: <Icon type="plus" /> }],
+    endIcon: [
       { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
       { iconComponent: <Icon type="plus" /> },
       { iconComponent: 'search', onClick: () => console.log('search') },
@@ -41,7 +42,7 @@ const meta: Meta<typeof Story> = {
   },
   argTypes: {
     size: { options: [undefined, ...SIZES], control: 'inline-radio' },
-    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    endIcon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
     groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
   parameters: {

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -84,6 +84,10 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     flexShrink: 0,
   },
 
+  startControls: {
+    paddingLeft: 'var(--control-padding)',
+  },
+
   icon: {
     display: 'flex',
     alignItems: 'center',
@@ -111,6 +115,8 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     },
   },
 
+  startIcon: {},
+
   endIcon: {},
 
   activeIcon: {
@@ -130,6 +136,8 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     },
   },
 
+  withStartControls: {},
+
   /* groupPositions */
   'placement-top': {
     borderBottomLeftRadius: 0,

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode, useCallback, useState } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
@@ -12,7 +12,7 @@ import {
 import { useTweakStyles } from '../../hooks';
 import { IMaybeArray } from '../../theme';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
-import { Icon, IIcon, renderIcon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { convertToControlWrapperIcon } from './helpers';
 import { IControlWrapperIcon, IControlWrapperSize, IGroupPlacement } from './types';
@@ -21,7 +21,10 @@ import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
   children: ReactNode;
   label?: ReactNode;
+  /** @deprecated */
   icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  startIcon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  endIcon?: IMaybeArray<IIcon | IControlWrapperIcon>;
   size?: IControlWrapperSize;
   groupPlacement?: IGroupPlacement;
   /** @default false */
@@ -46,6 +49,8 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
 export const ControlWrapper: FC<IControlWrapperProps> = ({
   label,
   icon,
+  startIcon,
+  endIcon = icon,
   groupPlacement,
   isInvalid,
   isFocused,
@@ -64,11 +69,15 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const icons = getArray(icon).map(convertToControlWrapperIcon);
+  const [startControlsWidth, setStartControlsWidth] = useState<number>();
 
-  const hasIcons = !isLoading && isArrayNotEmpty(icons);
+  const startIcons = getArray(startIcon).map(convertToControlWrapperIcon);
+  const endIcons = getArray(endIcon).map(convertToControlWrapperIcon);
+
+  const hasStartIcons = isArrayNotEmpty(startIcons);
+  const hasEndIcons = !isLoading && isArrayNotEmpty(endIcons);
   const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
-  const hasControls = hasIcons || hasClearButton || isLoading;
+  const hasEndControls = hasEndIcons || hasClearButton || isLoading;
 
   const tweakPreloaderStyles = useTweakStyles({
     tweakStyles,
@@ -76,6 +85,32 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     currentComponentName: 'ControlWrapper',
   });
 
+  const startControlsRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setStartControlsWidth(node?.clientWidth);
+    },
+    // eslint-disable-next-line
+    [startIcon, size],
+  );
+
+  const renderIconControl = (
+    { key, iconComponent, onClick, shouldResetSize = false }: IControlWrapperIcon,
+    iconType: 'start' | 'end' | 'clear',
+    index?: number,
+  ) => (
+    <div
+      key={key ?? index}
+      className={clsx(classes.icon, classes[`${iconType}Icon`], {
+        [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+        [classes.customIcon]: shouldResetSize,
+      })}
+      {...addClickHandler(onClick, !isDisabled)}
+      {...addDataTestId(testId, `${iconType}-icon`)}
+    >
+      <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
+    </div>
+  );
+
   return (
     <div
       className={clsx(
@@ -89,8 +124,14 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           [classes.disabled]: isDisabled,
           [classes.loading]: isLoading,
           [classes.minContent]: !isFullWidth,
+          [classes.withStartControls]: hasStartIcons,
         },
       )}
+      style={
+        hasStartIcons
+          ? ({ '--start-controls-width': `${startControlsWidth}px` } as CSSProperties)
+          : undefined
+      }
       {...addDataAttributes(data, testId)}
     >
       {isReactNodeNotEmpty(label) && (
@@ -105,36 +146,21 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
         </div>
       )}
       <div className={classes.wrapper}>
+        {hasStartIcons && (
+          <div className={clsx(classes.controls, classes.startControls)} ref={startControlsRef}>
+            {startIcons.map((iconProps, index) => renderIconControl(iconProps, 'start', index))}
+          </div>
+        )}
+
         {children}
 
-        {hasControls && (
+        {hasEndControls && (
           <div className={classes.controls}>
-            {hasClearButton && (
-              <div
-                className={clsx(classes.icon, classes.clearIcon, classes.activeIcon)}
-                {...addClickHandler(onClear)}
-                {...addDataTestId(testId, 'clear')}
-              >
-                <div className={classes.iconInner}>
-                  <Icon type="close" />
-                </div>
-              </div>
-            )}
+            {hasClearButton &&
+              renderIconControl({ iconComponent: 'close', onClick: onClear }, 'clear')}
 
-            {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>
-              ))}
+            {hasEndIcons &&
+              endIcons.map((iconProps, index) => renderIconControl(iconProps, 'end', index))}
 
             {isLoading && (
               <div

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -22,7 +22,7 @@ const meta: Meta<typeof Story> = {
     isDisabled: false,
     isRequired: false,
     isReadonly: false,
-    icon: 'information',
+    endIcon: 'information',
     isClearable: true,
   },
 };

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

@@ -42,7 +42,8 @@ const meta: Meta<typeof Story> = {
   },
   argTypes: {
     type: { control: 'radio', options: types },
-    icon: { control: 'select', options: icons },
+    endIcon: { control: 'select', options: icons },
+    startIcon: { control: 'select', options: icons },
     mask: { control: 'select', options: masks },
     groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },

package/src/components/Input/Input.styles.ts

@@ -44,15 +44,14 @@ export const useStyles = createThemedStyles('Input', {
   },
 
   defaultWrapper: {
-    display: 'contents',
+    display: 'flex',
+    flexGrow: 1,
   },
 
   autoSizeWrapper: {
     position: 'relative',
-    display: 'flex',
     minWidth: 0,
     zIndex: 0,
-    flexGrow: 1,
   },
 
   autoSized: {

package/src/components/Input/InputBase.tsx

@@ -33,6 +33,8 @@ export interface IInputBaseProps
       IControlWrapperProps,
       | 'label'
       | 'icon'
+      | 'endIcon'
+      | 'startIcon'
       | 'size'
       | 'groupPlacement'
       | 'isInvalid'
@@ -97,7 +99,9 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       // Пропсы ControlWrapper
       data,
       groupPlacement,
+      startIcon,
       icon,
+      endIcon = icon,
       isLoading,
       isRequired,
       size,
@@ -198,7 +202,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       if (shouldFocusOnMount) {
         inputRef.current?.focus();
       }
-    }, []);
+    }, [shouldFocusOnMount]);
 
     return (
       <ControlWrapper
@@ -213,7 +217,8 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         onClear={isClearable && hasValue ? handleInputClear : undefined}
         data={data}
         groupPlacement={groupPlacement}
-        icon={icon}
+        startIcon={startIcon}
+        endIcon={endIcon}
         isLoading={isLoading}
         isRequired={isRequired}
         size={size}

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

@@ -20,7 +20,7 @@ const meta: Meta<typeof Story> = {
   args: {
     label: 'Label',
     infoMessage: 'Message Info',
-    icon: undefined,
+    endIcon: undefined,
     isInvalid: false,
     errorMessage: 'Error Text',
     isActive: false,
@@ -32,7 +32,7 @@ const meta: Meta<typeof Story> = {
     groupPlacement: undefined,
   },
   argTypes: {
-    icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
+    endIcon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
     groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };

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

@@ -16,7 +16,12 @@ const meta: Meta<typeof Story> = {
   component: Story,
   args: {
     placeholder: 'Поиск',
+    size: undefined,
     isAutoSized: false,
+    isLoading: false,
+  },
+  argTypes: {
+    size: { options: [undefined, 'micro'], control: 'inline-radio' },
   },
 };
 

package/src/components/SearchInput/SearchInput.styles.ts

@@ -2,27 +2,21 @@ import { IInputStyles } from '../Input';
 
 export const inputStyles: IInputStyles = {
   tweakControlWrapper: {
-    endIcon: {
+    startControls: {
       position: 'absolute',
-      width: 40,
       left: 0,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-
-      '&:not($activeIcon)': {
-        pointerEvents: 'none',
-      },
+      top: 0,
+      height: '100%',
+      pointerEvents: 'none',
     },
 
     controlWrapper: {
       borderColor: 'transparent',
     },
   },
+
   inputContent: {
-    fontSize: 14,
-    paddingLeft: 44,
+    paddingLeft: 'calc(var(--start-controls-width) + var(--control-padding))',
   },
 };
 

package/src/components/SearchInput/SearchInput.tsx

@@ -6,7 +6,7 @@ import { inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
-  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'
+  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles' | 'startIcon'
 > &
   ICommonProps<ISearchInputStyles>;
 
@@ -22,7 +22,7 @@ export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
     return (
       <Input
         ref={ref}
-        icon="search"
+        startIcon="search"
         isClearable={isClearable}
         tweakStyles={tweakInputStyles}
         {...props}

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

@@ -189,7 +189,7 @@ const meta: Meta<typeof Story> = {
     noMatchesLabel: 'No matches',
     isInvalid: false,
     errorMessage: 'Error Text',
-    icon: 'filter',
+    endIcon: 'filter',
     defaultOptionLabel: '',
     allOptionsLabel: 'Все опции',
     isDisabled: false,
@@ -224,7 +224,7 @@ const meta: Meta<typeof Story> = {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
-    icon: { control: 'select', options: icons },
+    endIcon: { control: 'select', options: icons },
   },
 };
 

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

@@ -193,7 +193,7 @@ const meta: Meta<typeof Story> = {
     isClearable: false,
     isLoading: false,
     debounceTime: 400,
-    icon: undefined,
+    endIcon: undefined,
     // custom options
     shouldUseReactNodes: false,
     valuesType: 'strings',
@@ -221,7 +221,7 @@ const meta: Meta<typeof Story> = {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
-    icon: { control: 'select', options: icons },
+    endIcon: { control: 'select', options: icons },
   },
 };
 

package/src/components/Select/Select.tsx

@@ -126,6 +126,7 @@ export function Select<Value>(
     shouldScrollToList = true,
     searchInput,
     icon,
+    endIcon = icon,
     onChange,
     onFocus,
     onBlur,
@@ -139,6 +140,7 @@ export function Select<Value>(
     optionsFilter,
     infoMessage,
     errorMessage,
+    size,
     ...inputProps
   } = props;
   const classes = useStyles({ theme: tweakStyles });
@@ -519,6 +521,7 @@ export function Select<Value>(
 
   const searchInputEl = hasSearchInputInList && (
     <SearchInput
+      size={size}
       value={searchValue}
       onChange={handleInputChange}
       tweakStyles={tweakSearchInputStyles}
@@ -551,6 +554,7 @@ export function Select<Value>(
       {isOpen && (
         <SelectList
           options={filteredOptions}
+          size={size}
           defaultOptionLabel={hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel}
           allOptionsLabel={shouldShowAllOption && allOptionsLabel}
           areAllOptionsSelected={areAllOptionsSelected}
@@ -594,6 +598,7 @@ export function Select<Value>(
             value={
               searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
             }
+            size={size}
             onChange={handleInputChange}
             isActive={isListOpen || isActive}
             isReadonly={hasReadonlyInput}
@@ -617,7 +622,7 @@ export function Select<Value>(
                   }
                 : undefined,
 
-              ...getArray(icon),
+              ...getArray(endIcon),
 
               <div
                 key="arrow"

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

@@ -3,10 +3,12 @@ import clsx from 'clsx';
 import {
   addDataTestId,
   getArray,
+  isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { type ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import type { ISelectProps } from '../../Select';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
 import { type ISelectListItemProps, SelectListItem } from '../SelectListItem';
 import { type ISelectListStyles, useStyles } from './SelectList.styles';
@@ -15,6 +17,7 @@ export interface ISelectListProps<Value>
   extends ICommonProps<ISelectListStyles>,
     Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
   options: Value[] | readonly Value[];
+  size?: ISelectProps<Value>['size'];
   focusedIndex?: number;
   activeValue?: Value | Value[];
   noMatchesLabel?: string;
@@ -35,6 +38,7 @@ export interface ISelectListProps<Value>
 export function SelectList<Value>({
   options,
   focusedIndex,
+  size,
   activeValue,
   defaultOptionLabel,
   noMatchesLabel = 'Совпадений не найдено',
@@ -78,7 +82,7 @@ export function SelectList<Value>({
   return (
     <ScrollIntoViewIfNeeded
       active={shouldScrollToList && !isMultiSelect}
-      className={clsx(classes.root, {
+      className={clsx(classes.root, isNotEmpty(size) && classes[size], {
         [classes.withListHeader]: isHeaderNotEmpty,
         [classes.withListFooter]: isFooterNotEmpty,
       })}