@true-engineering/true-react-common-ui-kit 3.44.0 → 3.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.44.0",
+  "version": "3.45.0",
   "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.tsx

@@ -1,31 +1,39 @@
 import { FC } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addClickHandler,
+  addDataAttributes,
+  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 { 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 +46,12 @@ 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={classes.icon} {...addClickHandler(onSearchIconClick)}>
         <Icon type="search" />
       </div>
       <Input
+        inputMode="search"
         isClearable={isClearable}
         isActive={props.value !== '' && props.value !== undefined}
         testId={getTestId(testId, 'input')}

package/src/components/WithPopup/WithPopup.tsx

@@ -182,7 +182,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
       )}
       {isMounted && (
         <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLElement) : undefined}
+          root={shouldRenderInBody ? document.body : (refs.reference.current as HTMLElement)}
         >
           <div
             ref={refs.setFloating}