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

package/package.json

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

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

@@ -4,7 +4,7 @@ import { IThemedPreloaderStyles } from '../ThemedPreloader';
 const { CONTROL, Z_INDEX } = dimensions;
 
 export const useStyles = createThemedStyles('ControlWrapper', {
-  root: {
+  controlWrapper: {
     '--control-height': `${CONTROL.HEIGHT - 2}px`, // borders
     '--control-padding': `${CONTROL.PADDING}px`,
     '--icon-size': `${CONTROL.ICON_SIZE}px`,

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -79,7 +79,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   return (
     <div
       className={clsx(
-        classes.root,
+        classes.controlWrapper,
         isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
         {
           [classes.invalid]: isInvalid,

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.ts

@@ -35,7 +35,7 @@ export const selectStyles: ISelectStyles = {
 
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         '--control-height': '35px',
         border: 'none',
       },

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -49,7 +49,7 @@ export const inputStyles: IInputStyles = {
         paddingRight: 0,
       },
     },
-  }
+  },
 };
 
 export const clearButtonStyles = cloneDeep(innerTextButtonStyles);

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -7,7 +7,12 @@ import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
 import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { clearButtonStyles, IFilterIntervalStyles, inputStyles, useStyles } from './FilterInterval.styles';
+import {
+  clearButtonStyles,
+  IFilterIntervalStyles,
+  inputStyles,
+  useStyles,
+} from './FilterInterval.styles';
 
 export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
   value?: Array<number | undefined>;

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -123,12 +123,12 @@ export const useStyles = createThemedStyles('FilterSelect', {
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         '--control-height': '40px',
         backgroundColor: 'transparent',
         border: 'none',
       },
-    }
+    },
   },
 };
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -1,5 +1,11 @@
 import { rgba } from '../../../../helpers';
-import { animations, colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
+import {
+  animations,
+  colors,
+  createThemedStyles,
+  dimensions,
+  ITweakStyles,
+} from '../../../../theme';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
@@ -84,7 +90,7 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         '--control-height': `${FILTER_HEIGHT - 2}px`,
         backgroundColor: 'transparent',
         border: 'none',

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -72,7 +72,7 @@ export const inputStyles: IInputStyles = {
     controls: {
       paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
     },
-  }
+  },
 };
 
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

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

@@ -1,6 +1,6 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithMessagesStyles } from '../WithMessages';
 
 const PADDING_WITH_UNITS = 8;
 
@@ -69,12 +69,15 @@ export const useStyles = createThemedStyles('Input', {
 
   withLabel: {},
 
+  withValue: {},
+
   fakeValue: {
     extend: 'inputContent',
     visibility: 'hidden',
     maxWidth: '100%',
     overflow: 'hidden',
     minWidth: 8,
+    whiteSpace: 'nowrap',
   },
 
   units: {
@@ -93,6 +96,6 @@ export type IInputStyles = ITweakStyles<
   typeof useStyles,
   {
     tweakControlWrapper: IControlWrapperStyles;
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
   }
 >;

package/src/components/Input/Input.tsx

@@ -1,24 +1,24 @@
 import { forwardRef } from 'react';
 import { useTweakStyles } from '../../hooks';
-import { ControlGroup, IControlGroupProps } from '../ControlGroup';
+import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { IInputBaseProps, InputBase } from './InputBase';
 
 export type IInputProps = IInputBaseProps &
-  Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>;
+  Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(
   ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
-    const tweakControlGroupStyles = useTweakStyles({
+    const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: 'tweakControlGroup',
+      className: 'tweakWithMessages',
     });
 
     return (
-      <ControlGroup
+      <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
         testId={testId}
-        tweakStyles={tweakControlGroupStyles}
+        tweakStyles={tweakWithMessagesStyles}
       >
         <InputBase
           {...inputProps}
@@ -27,7 +27,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
           tweakStyles={tweakStyles}
           isInvalid={isInvalid}
         />
-      </ControlGroup>
+      </WithMessages>
     );
   },
 );

package/src/components/Input/InputBase.tsx

@@ -168,6 +168,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
     const props: InputHTMLAttributes<HTMLInputElement> = {
       className: clsx(classes.input, {
         [classes.withUnits]: hasUnits,
+        [classes.withValue]: hasValue,
         [classes.withLabel]: isReactNodeNotEmpty(label),
         [classes.autoSized]: isAutoSized,
         [classes.focusedInput]: isFocused,

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

@@ -92,7 +92,7 @@ export const useStyles = createThemedStyles('MultiSelectList', {
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         '--control-height': '40px',
         backgroundColor: 'transparent',
         border: 'none',

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

@@ -73,14 +73,14 @@ export const useStyles = createThemedStyles('PhoneInput', {
 
 export const inputStyles: IInputStyles = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       paddingLeft: COUNTRY_SELECT_WIDTH,
     },
 
     label: {
       marginLeft: COUNTRY_SELECT_WIDTH,
     },
-  }
+  },
 };
 
 export type IPhoneInputStyles = ITweakStyles<

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

@@ -86,7 +86,7 @@ export const useStyles = createThemedStyles('PhoneInputCountryList', {
 
 export const inputStyles: IInputStyles = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       border: 'none',
       height: 'calc(var(--control-height) - 2px)',
     },

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

@@ -1,44 +1,31 @@
-import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
-const { Z_INDEX } = dimensions;
-
-export const useStyles = createThemedStyles('SearchInput', {
-  root: {
-    position: 'relative',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    color: colors.GREY_ACTIVE,
-    zIndex: Z_INDEX.CONTROL_FOCUS + 1,
-  },
-});
-
 export const inputStyles: IInputStyles = {
   tweakControlWrapper: {
-    root: {
-      borderColor: 'transparent',
-      borderRadius: 18,
-      paddingLeft: 0,
-      transitionProperty: 'background-color, border-color',
+    endIcon: {
+      position: 'absolute',
+      width: 40,
+      left: 0,
+
+      '&:last-child': {
+        paddingRight: 0,
+      },
+
+      '&:not($activeIcon)': {
+        pointerEvents: 'none',
+      },
     },
 
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN,
+    controlWrapper: {
+      borderColor: 'transparent',
     },
   },
-
   inputContent: {
     fontSize: 14,
     paddingLeft: 44,
   },
 };
 
-export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+export interface ISearchInputStyles {
+  tweakInput?: IInputStyles;
+}

package/src/components/SearchInput/SearchInput.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
-import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
+import { inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
@@ -15,15 +13,13 @@ export type ISearchInputProps = Omit<
 
 export const SearchInput: FC<ISearchInputProps> = ({
   isClearable = true,
-  tweakStyles,
   placeholder,
   value,
   testId,
+  tweakStyles,
   data,
   ...props
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
   const tweakInputStyles = useTweakStyles({
     innerStyles: inputStyles,
     tweakStyles,
@@ -32,18 +28,14 @@ export const SearchInput: FC<ISearchInputProps> = ({
   });
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <div className={classes.icon}>
-        <Icon type="search" />
-      </div>
-      <Input
-        value={value}
-        placeholder={placeholder}
-        isClearable={isClearable}
-        testId={getTestId(testId, 'input')}
-        tweakStyles={tweakInputStyles}
-        {...props}
-      />
-    </div>
+    <Input
+      value={value}
+      placeholder={placeholder}
+      icon="search"
+      isClearable={isClearable}
+      testId={getTestId(testId, 'input')}
+      tweakStyles={tweakInputStyles}
+      {...props}
+    />
   );
 };

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

@@ -55,9 +55,9 @@ const useCustomListFooterStyles = createUseStyles({
 
 const inputTweakStyles: IInputStyles = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       '--control-height': '24px',
-    }
+    },
   },
 
   input: {

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

@@ -1,8 +1,8 @@
 import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
 import { animations, createThemedStyles, dimensions, type ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
+import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
 
 const { CONTROL, Z_INDEX } = dimensions;
@@ -84,6 +84,12 @@ const baseInputStyles: IInputStyles = {
     paddingRight: 32,
   },
 
+  input: {
+    '&[readonly]': {
+      cursor: 'pointer',
+    },
+  },
+
   tweakControlWrapper: {
     controls: {
       paddingRight: 40,
@@ -125,7 +131,7 @@ export const getInputStyles = ({
 export type ISelectStyles = ITweakStyles<
   typeof useStyles,
   {
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;

package/src/components/Select/Select.tsx

@@ -18,7 +18,6 @@ import { debounce } from 'ts-debounce';
 import {
   createFilter,
   getTestId,
-  isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -26,10 +25,10 @@ import {
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
-import { ControlGroup } from '../ControlGroup';
 import { IIcon, renderIcon } from '../Icon';
 import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { WithMessages } from '../WithMessages';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
@@ -142,9 +141,9 @@ export function Select<Value>(
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
 
-  const tweakControlGroupStyles = useTweakStyles({
+  const tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
-    className: 'tweakControlGroup',
+    className: 'tweakWithMessages',
     currentComponentName: 'Select',
   });
 
@@ -241,23 +240,10 @@ export function Select<Value>(
     [convertValueToId, convertValueToString],
   );
 
-  const getDropdownOffset = () => {
-    if (isEmpty(input.current)) {
-      return 0;
-    }
-
-    // Высота элемента inputWrapper у компонента Input
-    return input.current.parentElement?.offsetHeight ?? 0;
-  };
-
   const closeList = useCallback(() => {
     setIsListOpen(false);
     setSearchValue('');
     setShouldShowDefaultOption(true);
-
-    if (!dropdownOptions?.shouldUsePopper) {
-      root.current?.style.removeProperty('--dropdown-offset');
-    }
   }, [dropdownOptions?.shouldUsePopper]);
 
   const handleListClose = useCallback(
@@ -269,16 +255,8 @@ export function Select<Value>(
   );
 
   const handleListOpen = () => {
-    if (isReadonly) {
-      return;
-    }
-
-    if (!isListOpen) {
+    if (!isReadonly && !isListOpen) {
       setIsListOpen(true);
-
-      if (!dropdownOptions?.shouldUsePopper) {
-        root.current?.style.setProperty('--dropdown-offset', `${getDropdownOffset()}px`);
-      }
     }
   };
 
@@ -599,10 +577,10 @@ export function Select<Value>(
     ) : undefined;
 
   return (
-    <ControlGroup
+    <WithMessages
       errorMessage={errorMessage}
       infoMessage={infoMessage}
-      tweakStyles={tweakControlGroupStyles}
+      tweakStyles={tweakWithMessagesStyles}
     >
       <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div
@@ -645,6 +623,6 @@ export function Select<Value>(
           <>{isOpen && listEl}</>
         )}
       </div>
-    </ControlGroup>
+    </WithMessages>
   );
 }

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

@@ -1,6 +1,6 @@
 import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithMessagesStyles } from '../WithMessages';
 
 export const useStyles = createThemedStyles('TextArea', {
   textarea: {
@@ -32,12 +32,16 @@ export const useStyles = createThemedStyles('TextArea', {
     },
   },
 
+  wrapper: {
+    width: '100%',
+  },
+
   autoSized: {
     display: 'grid',
     gridTemplateRows: 'minmax(0, 100%)',
 
     '& > $textarea, &::after': {
-      gridArea: '1 / 2',
+      gridArea: '1 / 1',
     },
 
     '&::after': {
@@ -72,7 +76,7 @@ export const controlWrapperStyles: IControlWrapperStyles = {
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,
   {
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
   }
 >;

package/src/components/TextArea/TextArea.tsx

@@ -8,15 +8,15 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { ControlGroup, IControlGroupProps } from '../ControlGroup';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { ITextAreaHTMLBaseProps } from './types';
 import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
     Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
     Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
   value?: string;
   placeholder?: string;
@@ -73,9 +73,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   ) => {
     const classes = useStyles({ theme: tweakStyles });
 
-    const tweakControlGroupStyles = useTweakStyles({
+    const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: 'tweakControlGroup',
+      className: 'tweakWithMessages',
       currentComponentName: 'TextArea',
     });
 
@@ -92,7 +92,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
     const hasValue = value !== undefined && value !== '';
     const hasLabel = isReactNodeNotEmpty(label);
-    const hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
+    const hasPlaceholder =
+      (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
 
     const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
       onChange(event.currentTarget.value, event);
@@ -109,10 +110,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <ControlGroup
+      <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
-        tweakStyles={tweakControlGroupStyles}
+        tweakStyles={tweakWithMessagesStyles}
       >
         <ControlWrapper
           label={label}
@@ -124,7 +125,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
           testId={testId}
           {...controlProps}
         >
-          <div {...(isAutoSized && { className: classes.autoSized, 'data-value': value })}>
+          <div
+            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
+            {...(isAutoSized && { 'data-value': value })}
+          >
             <textarea
               ref={ref}
               className={classes.textarea}
@@ -151,7 +155,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
             {value.length} / {maxLength}
           </span>
         )}
-      </ControlGroup>
+      </WithMessages>
     );
   },
 );

package/src/components/{ControlGroup/ControlGroup.stories.tsx → WithMessages/WithMessages.stories.tsx}

@@ -1,26 +1,26 @@
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
 import { IInputProps, Input } from '../Input';
-import { ControlGroup } from './ControlGroup';
+import { WithMessages } from './WithMessages';
 
 export default {
-  title: 'ControlGroup',
-  component: ControlGroup,
+  title: 'WithMessages',
+  component: WithMessages,
 };
 
-const Template: ComponentStory<typeof ControlGroup> = ({ direction, ...args }) => {
+const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...args }) => {
   let groupPlacement: Array<IInputProps['groupPlacement']> = [];
-  if (direction === 'horizontal') {
+  if (controlsDirection === 'horizontal') {
     groupPlacement = ['left', 'right'];
   }
-  if (direction === 'vertical') {
+  if (controlsDirection === 'vertical') {
     groupPlacement = ['top', 'bottom'];
   }
   return (
-    <ControlGroup {...args} direction={direction}>
+    <WithMessages {...args} controlsDirection={controlsDirection}>
       <Input value="value" groupPlacement={groupPlacement[0]} onChange={doNothing} />
       <Input value="value" groupPlacement={groupPlacement[1]} onChange={doNothing} />
-    </ControlGroup>
+    </WithMessages>
   );
 };
 
@@ -29,11 +29,11 @@ export const Default = Template.bind({});
 Default.args = {
   infoMessage: 'Message Info',
   errorMessage: 'Error Text',
-  direction: undefined,
+  controlsDirection: undefined,
 };
 
 Default.argTypes = {
-  direction: {
+  controlsDirection: {
     options: [undefined, 'horizontal', 'vertical'],
     control: 'radio',
   },