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

package/package.json

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

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/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/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 inputStyles: IInputStyles = {
+  tweakControlWrapper: {
+    endIcon: {
+      position: 'absolute',
+      width: 40,
+      left: 0,
 
-export const useStyles = createThemedStyles('SearchInput', {
-  root: {
-    position: 'relative',
-  },
+      '&:last-child': {
+        paddingRight: 0,
+      },
 
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    color: colors.GREY_ACTIVE,
-    zIndex: Z_INDEX.CONTROL_FOCUS + 1,
-  },
-});
+      '&:not($activeIcon)': {
+        pointerEvents: 'none',
+      },
+    },
 
-export const inputStyles: IInputStyles = {
-  tweakControlWrapper: {
     controlWrapper: {
       borderColor: 'transparent',
-      borderRadius: 18,
-      paddingLeft: 0,
-      transitionProperty: 'background-color, border-color',
-    },
-
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN,
     },
   },
-
   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}
+    />
   );
 };