@true-engineering/true-react-common-ui-kit 2.1.1 → 2.2.0

package/dist/types.d.ts

@@ -1,6 +1,7 @@
+import { ReactElement } from 'react';
 import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
+import type { ICommonIcon, IComplexIcon, IIconType, IPreloaderSvgType, ISvgIcon } from './components';
 export interface IDataAttributes {
     [key: string]: unknown;
 }
@@ -17,6 +18,7 @@ export interface IDropdownWithPopperOptions {
     placement?: Placement;
     flipOptions?: Record<string, any>;
 }
+export declare type IIcon = IIconType | ReactElement;
 export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
 export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
 export declare type UiKitAnimations = Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,6 +42,7 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@true-engineering/true-react-platform-helpers": "0.0.4",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",

package/src/components/Button/Button.tsx

@@ -1,34 +1,16 @@
-import {
-  useMemo,
-  ReactElement,
-  ReactNode,
-  ButtonHTMLAttributes,
-  MouseEvent,
-  forwardRef,
-} from 'react';
+import { useMemo, ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
 import clsx from 'clsx';
 import merge from 'lodash-es/merge';
-import { addDataAttributes, isNotEmpty, addDataTestId } from '../../helpers';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { renderIcon } from '../../helpers/snippets';
 import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon, IIconType } from '../Icon';
+import { ICommonProps, IIcon } from '../../types';
 import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
 import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
 
 export type IButtonSize = 's' | 'm' | 'l' | 'xl';
 
-/* Information for migration from old views
-
-      main => primary
-      cancel => secondary
-      cancel-light => outline
-      attention => warning
-      light => text
-      error => destructive
-
-  For other old views use custom.
-*/
-
 export const BUTTON_VIEWS = [
   'primary',
   'secondary',
@@ -82,7 +64,7 @@ export interface IButtonProps extends ICommonProps {
    * @default false
    */
   isActive?: boolean;
-  icon?: IIconType | ReactElement;
+  icon?: IIcon;
   /**
    * @default `left`
    */
@@ -133,8 +115,8 @@ export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
       [tweakStyles?.tweakPreloader, size],
     );
 
-    const hasIcon = isNotEmpty(icon);
-    const hasChildren = isNotEmpty(children);
+    const hasIcon = isReactNodeNotEmpty(icon);
+    const hasChildren = isReactNodeNotEmpty(children);
     const hasNoAction = isDisabled || isLoading;
 
     return (
@@ -163,9 +145,7 @@ export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
           })}
         >
           {hasIcon && (
-            <span className={classes.icon}>
-              {typeof icon === 'string' ? <Icon type={icon as IIconType} /> : icon}
-            </span>
+            <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
           )}
           {hasChildren && (
             <span className={clsx(classes.children, hasIcon && classes.withIcon)}>{children}</span>

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useState, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, getSelectKeyHandler, isNotEmpty } from '../../helpers';
+import {
+  addDataTestId,
+  getSelectKeyHandler,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -94,7 +99,7 @@ export function Checkbox<V>({
       <div className={clsx(classes.check, isSelected && classes.checked)}>
         <Icon type={isSemiChecked ? 'minus' : 'check'} />
       </div>
-      {isNotEmpty(children) && <div className={classes.children}>{children}</div>}
+      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
     </label>
   );
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -14,7 +14,12 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
-import { addDataAttributes, isEmpty, isNotEmpty, isStringNotEmpty } from '../../helpers';
+import {
+  isEmpty,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerStyles, styles } from './DatePicker.styles';

package/src/components/DatePicker/helpers.ts

@@ -1,5 +1,9 @@
 import { parse, format, isSameDay } from 'date-fns';
-import { isEmpty, isNotEmpty, isStringNotEmpty } from '../../helpers';
+import {
+  isEmpty,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
 
 export const getDateFormatter =

package/src/components/FiltersPane/FilterSelect/FilterSelect.tsx

@@ -1,7 +1,8 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../helpers';
 import { useIsMounted, useTheme, useTweakStyles } from '../../../hooks';
 import { ICommonProps } from '../../../types';
 import { Button } from '../../Button';
@@ -82,7 +83,7 @@ export function FilterSelect<Value>({
   const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
 
   const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
-  const hasFooter = isNotEmpty(footer);
+  const hasFooter = isReactNodeNotEmpty(footer);
 
   const handleSearchInputChange = useCallback(
     async (inputValue?: string) => {

package/src/components/FiltersPane/FilterWithDates/FilterWithDates.tsx

@@ -2,7 +2,8 @@ import { useState, useMemo, useRef, FC } from 'react';
 import { isAfter, isBefore } from 'date-fns';
 import enUS from 'date-fns/locale/en-US';
 import ru from 'date-fns/locale/ru';
-import { addDataAttributes, getTestId } from '../../../helpers';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../helpers';
 import { useTheme, useTweakStyles } from '../../../hooks';
 import { ICommonProps } from '../../../types';
 import { Button } from '../../Button';

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { addDataAttributes, getNumberInRange, getNumberLength, isInt } from '../../helpers';
+import { isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { INumberInputProps, NumberInput } from '../NumberInput';
 import { ChangeButton } from './ChangeButton';
@@ -21,7 +22,7 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   tweakStyles,
   ...props
 }) => {
-  if (!isInt(step)) {
+  if (!isNumberInteger(step)) {
     console.error('Параметр step должен быть целым числом');
   }
 

package/src/components/Input/Input.tsx

@@ -9,15 +9,19 @@ import {
   KeyboardEvent,
   ClipboardEvent,
   InputHTMLAttributes,
-  ReactElement,
 } from 'react';
 import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import {
+  addDataTestId,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
 import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon, IIconType } from '../Icon';
+import { ICommonProps, IIcon } from '../../types';
+import { Icon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { InputStyles, styles } from './Input.styles';
 
@@ -75,7 +79,7 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
    * @default 6
    */
   defaultSize?: number;
-  iconType?: IIconType | ReactElement;
+  iconType?: IIcon;
   units?: string;
   name?: string;
   hasRequiredLabel?: boolean;
@@ -170,8 +174,9 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const hasControls = hasClearIcon || iconType !== undefined || isLoading;
     const hasValue = value !== undefined && value !== '';
     const hasUnits = units !== undefined && units !== '';
-    const hasLabel = isNotEmpty(label);
-    const hasPlaceholder = (!hasLabel || (hasFocus && !isReadonly)) && isNotEmpty(placeholder);
+    const hasLabel = isStringNotEmpty(label);
+    const hasPlaceholder =
+      (!hasLabel || (hasFocus && !isReadonly)) && isStringNotEmpty(placeholder);
     const shouldShowUnits = (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
 
     const props: InputHTMLAttributes<HTMLInputElement> = {
@@ -280,7 +285,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
                   <Icon type="close" />
                 </div>
               )}
-              {iconType !== undefined && (
+              {isReactNodeNotEmpty(iconType) && (
                 <div
                   // .inputIcon extend .icon
                   className={clsx(classes.inputIcon, {
@@ -294,8 +299,8 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
             </div>
           )}
         </div>
-        {isNotEmpty(infoMessage) && <div className={classes.info}>{infoMessage}</div>}
-        {isNotEmpty(errorMessage) && (
+        {isStringNotEmpty(infoMessage) && <div className={classes.info}>{infoMessage}</div>}
+        {isStringNotEmpty(errorMessage) && (
           <div className={clsx(classes.error, classes[`error-${errorPosition}`])}>
             {errorMessage}
           </div>

package/src/components/List/List.tsx

@@ -1,14 +1,19 @@
-import { FC, Fragment, ReactElement, ReactNode } from 'react';
+import { FC, Fragment, ReactNode } from 'react';
 import clsx from 'clsx';
-import { isNotEmpty, getTestId, addDataTestId, addDataAttributes } from '../../helpers';
+import {
+  addDataTestId,
+  getTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { renderIcon } from '../../helpers/snippets';
 import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon, IIconType } from '../Icon';
+import { ICommonProps, IIcon } from '../../types';
 import { ListStyles, styles } from './List.styles';
 
 export interface IListItem {
   item: ReactNode;
-  icon?: IIconType | ReactElement;
+  icon?: IIcon;
   disabled?: boolean;
   shouldDrawSpacerAbove?: boolean;
   shouldDrawSpacerBelow?: boolean;
@@ -42,14 +47,12 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
               [classes.disabledItem]: item.disabled,
               [classes.withIconGap]: item.withIconGap,
             })}
+            onClick={item.disabled ? undefined : () => handleItemClick(item)}
             {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
             {...(item.disabled && addDataAttributes({ disabled: item.disabled }))}
-            onClick={item.disabled ? undefined : () => handleItemClick(item)}
           >
-            {isNotEmpty(item.icon) && (
-              <span className={classes.icon}>
-                {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
-              </span>
+            {isReactNodeNotEmpty(item.icon) && (
+              <span className={classes.icon}>{renderIcon(item.icon)}</span>
             )}
             <span className={classes.content}>{item.item}</span>
           </div>

package/src/components/Modal/Modal.tsx

@@ -2,7 +2,12 @@ import { FC, ReactNode, MouseEvent, useCallback, useEffect, useRef, useState } f
 import { RemoveScroll } from 'react-remove-scroll';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
-import { isNotEmpty, getTestId, addDataAttributes, addDataTestId } from '../../helpers';
+import {
+  addDataTestId,
+  getTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { CloseButton } from '../CloseButton';
@@ -146,7 +151,7 @@ export const Modal: FC<IModalProps> = ({
                     />
                   </div>
                 )}
-                {isNotEmpty(title) && (
+                {isReactNodeNotEmpty(title) && (
                   <h3
                     className={clsx(classes.title, {
                       [classes.titleWithCloseButton]: hasCloseButton,
@@ -155,7 +160,7 @@ export const Modal: FC<IModalProps> = ({
                     {title}
                   </h3>
                 )}
-                {isNotEmpty(children) && <div className={classes.content}>{children}</div>}
+                {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
                 {hasFooter && (
                   <div
                     className={clsx(classes.footerWrapper, {

package/src/components/MoreMenu/MoreMenu.tsx

@@ -1,6 +1,7 @@
 import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, getTestId } from '../../helpers';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -66,9 +67,9 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
           [classes.disabled]: isButtonDisabled,
           [classes.active]: isMenuShown,
         })}
+        onClick={!isButtonDisabled ? toggleMenu : undefined}
         {...addDataTestId(testId)}
         {...addDataAttributes(data)}
-        onClick={!isButtonDisabled ? toggleMenu : undefined}
       >
         <div className={classes.icon}>
           <Icon type="menu" />

package/src/components/Notification/Notification.tsx

@@ -1,6 +1,11 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import {
+  addDataTestId,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -38,9 +43,8 @@ export const Notification: FC<INotificationProps> = ({
 }) => {
   const { classes } = useTheme('Notification', styles, tweakStyles, { type });
 
-  const hasText = isNotEmpty(text);
-  const hasTitle = isNotEmpty(title);
-  const hasTestId = isNotEmpty(testId);
+  const hasText = isStringNotEmpty(text);
+  const hasTitle = isStringNotEmpty(title);
 
   return (
     <div
@@ -57,16 +61,16 @@ export const Notification: FC<INotificationProps> = ({
       </div>
       <div className={classes.body}>
         {hasTitle && (
-          <span className={classes.title} data-testid={hasTestId ? `${testId}-title` : undefined}>
+          <span className={classes.title} {...addDataTestId(testId, 'title')}>
             {title}
           </span>
         )}
         {hasText && (
-          <span className={classes.text} data-testid={hasTestId ? `${testId}-text` : undefined}>
+          <span className={classes.text} {...addDataTestId(testId, 'text')}>
             {text}
           </span>
         )}
-        {isNotEmpty(children) && <div className={classes.content}>{children}</div>}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
       </div>
     </div>
   );

package/src/components/NumberInput/NumberInput.tsx

@@ -1,9 +1,9 @@
 import { FormEvent, KeyboardEvent, FocusEvent, forwardRef, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import {
   formatNumber,
   formatStringNumber,
   getNumberInRange,
-  isNotEmpty,
   removeStringFormat,
   setCaretPosition,
   stringToNumber,
@@ -53,7 +53,7 @@ export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
     };
 
     const setShowedValueWithDefault = (v: string) => {
-      setShowedValue(isNotEmpty(v) ? v : formatNumber(defaultValue));
+      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
     };
 
     const handleChange = async (

package/src/components/NumberInput/helpers.ts

@@ -1,4 +1,5 @@
-import { formatNumber, isNotEmpty, isSpaceChar } from '../../helpers';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { formatNumber, isSpaceChar } from '../../helpers';
 import { INumberInputProps } from './NumberInput';
 
 const getPrevSpaces = (val: string, position: number): number =>
@@ -32,7 +33,7 @@ export const formatNumberWithDefault = (
   defaultValue?: number,
 ): string => {
   const val = formatNumber(value);
-  return isNotEmpty(val) ? val : formatNumber(defaultValue);
+  return isStringNotEmpty(val) ? val : formatNumber(defaultValue);
 };
 
 export const constructRegExp = ({

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, isNotEmpty } from '../../helpers';
+import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { RadioButtonStyles, styles } from './RadioButton.styles';
@@ -48,7 +49,7 @@ export function RadioButton<Value extends string>({
           [classes.isInvalid]: isInvalid,
         })}
       />
-      {isNotEmpty(children) && <span className={classes.content}>{children}</span>}
+      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
     </label>
   );
 }

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -1,9 +1,9 @@
-import { createElement, createRef, PureComponent } from 'react';
+import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
 import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
 
-interface IScrollIntoViewIfNeededProps extends React.HTMLProps<HTMLElement> {
+interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
   active?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   elementType?: string;
   options?: StandardBehaviorOptions;
 }
@@ -20,7 +20,7 @@ const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
 };
 
 export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
-  node: React.RefObject<HTMLElement> = createRef();
+  node: RefObject<HTMLElement> = createRef();
 
   public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
 

package/src/components/SearchInput/SearchInput.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { getTestId, addDataAttributes, addDataTestId } from '../../helpers';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';

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

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { isNotEmpty } from '../../helpers';
 import { Select, ISelectProps } from './Select';
 
 interface ObjectValue {
@@ -165,7 +165,7 @@ function SelectWithCustomProps<T>({
         searchInput: { shouldRenderInList: true },
       })}
       isMultiSelect
-      noMatchesLabel={isNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}

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

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { isNotEmpty } from '../../helpers';
 import { Select, ISelectProps } from './Select';
 
 interface ObjectValue {
@@ -162,7 +162,7 @@ function SelectWithCustomProps<T>({
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
       })}
-      noMatchesLabel={isNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}

package/src/components/Select/Select.tsx

@@ -16,12 +16,12 @@ import { Styles } from 'jss';
 import merge from 'lodash-es/merge';
 import { debounce } from 'ts-debounce';
 import {
-  createFilter,
   getTestId,
-  hasExactParent,
   isNotEmpty,
   isStringNotEmpty,
-} from '../../helpers';
+  createFilter,
+} from '@true-engineering/true-react-platform-helpers';
+import { hasExactParent } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
 import {
   useIsMounted,
@@ -30,8 +30,7 @@ import {
   useDropdown,
   useTweakStyles,
 } from '../../hooks';
-import { IDropdownWithPopperOptions } from '../../types';
-import { IIconType, Icon } from '../Icon';
+import { IDropdownWithPopperOptions, IIcon } from '../../types';
 import { IInputProps, Input } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectStyles, styles } from './Select.styles';
@@ -57,7 +56,7 @@ export interface ISelectProps<Value>
   debounceTime?: number;
   minSymbolsCountToOpenList?: number;
   dropdownOptions?: IDropdownWithPopperOptions;
-  dropdownIcon?: IIconType;
+  dropdownIcon?: IIcon;
   options: Value[];
   value: Value | undefined;
   shouldScrollToList?: boolean;
@@ -144,7 +143,8 @@ export function Select<Value>(
 
   const isMultiSelect = isMultiSelectValue(props, value);
   const strValue = isMultiSelect ? value?.[0] : value;
-  const shouldShowAllOption = isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
+  const shouldShowAllOption =
+    isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === '';
 
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
@@ -560,7 +560,7 @@ export function Select<Value>(
           onClick={onArrowClick}
           className={clsx(classes.arrow, isOpen && classes.activeArrow)}
         >
-          <Icon type={dropdownIcon} />
+          {renderIcon(dropdownIcon)}
         </div>
       </div>
       {shouldUsePopper ? (

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

@@ -1,6 +1,10 @@
 import { ReactNode, useMemo, MouseEvent } from 'react';
 import clsx from 'clsx';
-import { isNotEmpty } from '../../../helpers';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
@@ -83,16 +87,18 @@ export function SelectList<Value>({
     <ScrollIntoViewIfNeeded
       active={shouldScrollToList && !isMultiSelect}
       className={clsx(classes.root, {
-        [classes.withListHeader]: isNotEmpty(customListHeader),
+        [classes.withListHeader]: isReactNodeNotEmpty(customListHeader),
       })}
     >
-      {isNotEmpty(customListHeader) && <div className={classes.listHeader}>{customListHeader}</div>}
+      {isReactNodeNotEmpty(customListHeader) && (
+        <div className={classes.listHeader}>{customListHeader}</div>
+      )}
       <div className={classes.list} data-testid={testId}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (
           <>
-            {isNotEmpty(defaultOptionLabel) && (
+            {isStringNotEmpty(defaultOptionLabel) && (
               <ScrollIntoViewIfNeeded
                 active={focusedIndex === DEFAULT_OPTION_INDEX}
                 options={{ block: 'nearest' }}
@@ -106,7 +112,7 @@ export function SelectList<Value>({
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
-            {isNotEmpty(allOptionsLabel) && (
+            {isStringNotEmpty(allOptionsLabel) && (
               <SelectListItem
                 classes={classes}
                 index={ALL_OPTION_INDEX}

package/src/components/Select/SelectListItem/SelectListItem.tsx

@@ -1,7 +1,8 @@
 import { ReactNode, MouseEvent, FC } from 'react';
 import clsx from 'clsx';
 import { Classes } from 'jss';
-import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../helpers';
 import { Checkbox } from '../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { checkboxStyles } from './SelectListItem.styles';

package/src/components/Select/helpers.ts

@@ -1,4 +1,4 @@
-import { isNotEmpty } from '../../helpers';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { IMultipleSelectProps, ISelectProps } from './Select';
 import { IMultipleSelectValue } from './types';