@true-engineering/true-react-common-ui-kit 3.44.1 → 3.45.1

package/package.json

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

package/src/components/Input/types.ts

@@ -13,6 +13,7 @@ export type IInputHTMLBaseProps = Pick<
   | 'tabIndex'
   | 'placeholder'
   | 'type'
+  | 'inputMode'
   | 'onBlur'
   | 'onFocus'
   | 'onInput'

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

@@ -1,5 +1,5 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
 const LEFT_PADDING = 44;
@@ -19,6 +19,10 @@ export const useStyles = createThemedStyles('SearchInput', {
     zIndex: 2,
     color: colors.GREY_ACTIVE,
   },
+
+  iconClickable: {
+    cursor: 'pointer',
+  },
 });
 
 export const inputStyles: IInputStyles = {

package/src/components/SearchInput/SearchInput.tsx

@@ -1,31 +1,41 @@
 import { FC } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import clsx from 'clsx';
+import {
+  addClickHandler,
+  addDataAttributes,
+  getTestId,
+  isNotEmpty,
+} 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 { useStyles, inputStyles, ISearchInputStyles } from './SearchInput.styles';
+import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
 
-export type ISearchInputProps = Omit<
-  IInputProps,
-  | 'type'
-  | 'isInvalid'
-  | 'errorMessage'
-  | 'label'
-  | 'isActive'
-  | 'errorPosition'
-  | 'hasFloatingLabel'
-  | 'border'
-  | 'tweakStyles'
-> &
-  ICommonProps<ISearchInputStyles>;
+export interface ISearchInputProps
+  extends ICommonProps<ISearchInputStyles>,
+    Omit<
+      IInputProps,
+      | 'type'
+      | 'isInvalid'
+      | 'errorMessage'
+      | 'label'
+      | 'isActive'
+      | 'errorPosition'
+      | 'hasFloatingLabel'
+      | 'border'
+      | 'tweakStyles'
+    > {
+  // TODO: Можно будет удалить в 4й версии
+  onSearchIconClick?: () => void;
+}
 
 export const SearchInput: FC<ISearchInputProps> = ({
   isClearable = true,
   tweakStyles,
   testId,
   data,
+  onSearchIconClick,
   ...props
 }) => {
   const classes = useStyles({ theme: tweakStyles });
@@ -38,11 +48,15 @@ export const SearchInput: FC<ISearchInputProps> = ({
   });
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <div className={classes.icon}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
+      <div
+        className={clsx(classes.icon, { [classes.iconClickable]: isNotEmpty(onSearchIconClick) })}
+        {...addClickHandler(onSearchIconClick)}
+      >
         <Icon type="search" />
       </div>
       <Input
+        inputMode="search"
         isClearable={isClearable}
         isActive={props.value !== '' && props.value !== undefined}
         testId={getTestId(testId, 'input')}