@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha7

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -34,10 +34,10 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
+      | 'rowRef'
     > {
   content: Row[];
   /** @default 'table' */
@@ -62,6 +62,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -88,6 +90,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -105,11 +108,12 @@ export function FlexibleTable<
 
   const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
 
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
+  const getTableRowProps = (
+    item: Row,
+    index: number,
+  ): IFlexibleTableRowProps<Row, HeaderContent, UniqueField> => ({
     ...restProps,
+    item,
     renderMode,
     config,
     columns,
@@ -118,7 +122,8 @@ export function FlexibleTable<
     isFirstColumnSticky,
     isFocusable: isRowFocusable,
     tweakStyles: tweakTableRowStyles,
-  };
+    isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index),
+  });
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -267,9 +272,7 @@ export function FlexibleTable<
         )}
         <Table.Body className={classes.body}>
           {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
+            indexMap(6, (i) => <FlexibleTableRow {...getTableRowProps({} as Row, i)} key={i} />)
           ) : (
             <>
               {shouldShowNothingFound && (
@@ -282,11 +285,9 @@ export function FlexibleTable<
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  {...tableRowProps}
+                  {...getTableRowProps(item, i)}
                   isActive={activeRowsSet.has(i)}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
                 />
               ))}
 

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,9 +1,9 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
+import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
+import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
 import {
   ITableRow,
@@ -19,9 +19,8 @@ export interface IFlexibleTableRowProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
-> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+> extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
-  index: number;
   uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** @default false */
@@ -37,7 +36,8 @@ export interface IFlexibleTableRowProps<
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  isExpandableRowComponentInitiallyOpen?: boolean;
+  rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   onRowHover?: (id?: Row[UniqueField]) => void;
@@ -50,7 +50,6 @@ function FlexibleTableRowInner<
   UniqueField extends keyof Row,
 >({
   item,
-  index,
   config,
   columns,
   uniqueField,
@@ -61,6 +60,7 @@ function FlexibleTableRowInner<
   isLoading = false,
   rowAttributes,
   isExpandableRowComponentInitiallyOpen = false,
+  rowRef,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
@@ -76,7 +76,7 @@ function FlexibleTableRowInner<
 
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
-    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+    isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
@@ -139,6 +139,7 @@ function FlexibleTableRowInner<
   return (
     <>
       <Table.Row
+        ref={rowRef}
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,

package/src/components/FlexibleTable/constants.ts

@@ -1,8 +1,11 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
+import { IFlexibleTableRenderElement, IFlexibleTableRenderMode } from './types';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender> = {
+export const TableRenders = {
   table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
   divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
-};
+} satisfies Record<
+  IFlexibleTableRenderMode,
+  Record<IFlexibleTableRenderElement, keyof JSX.IntrinsicElements>
+>;

package/src/components/FlexibleTable/types.ts

@@ -2,11 +2,7 @@ import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
 export type ITableRow = Record<string, any>;

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -26,7 +26,8 @@ export default {
 const Template: ComponentStory<typeof PhoneInput> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
-    phoneNumber: '1234567890',
+    phoneNumber: '9134567890',
+    countryCode: 'RU',
   });
 
   return <PhoneInput {...args} value={value} onChange={setValue} />;

package/src/components/PhoneInput/PhoneInput.tsx

@@ -76,7 +76,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
+    [value.countryCode, value.dialCode, value.phoneNumber],
   );
 
   const handleClose = () => {
@@ -122,7 +122,10 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {
-          phoneNumber: '',
+          phoneNumber:
+            newPhoneInfo.dialCode !== value.dialCode
+              ? ''
+              : getPhoneObjFromString(phoneWithCode).phoneNumber,
           dialCode: newPhoneInfo.dialCode,
           countryCode: newPhoneInfo.countryCode,
         },

package/src/components/SearchInput/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { forwardRef } from 'react';
 import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -11,31 +11,26 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  placeholder,
-  value,
-  testId,
-  tweakStyles,
-  data,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, placeholder, value, testId, tweakStyles, data, ...props }, ref) => {
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
 
-  return (
-    <Input
-      value={value}
-      placeholder={placeholder}
-      icon="search"
-      isClearable={isClearable}
-      testId={getTestId(testId, 'input')}
-      tweakStyles={tweakInputStyles}
-      {...props}
-    />
-  );
-};
+    return (
+      <Input
+        ref={ref}
+        value={value}
+        placeholder={placeholder}
+        icon="search"
+        isClearable={isClearable}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -63,7 +64,11 @@ export interface ISelectProps<Value>
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: false;
-  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
+  searchInput?: {
+    /** @default false */
+    shouldRenderInList?: boolean;
+    ref?: Ref<HTMLInputElement>;
+  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
   isOptionDisabled?: (option: Value) => boolean;
   onChange: (value: Value | undefined, event: IChangeSelectEvent) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
@@ -248,10 +253,14 @@ export function Select<Value>(
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {

package/src/components/Tooltip/Tooltip.styles.ts

@@ -32,6 +32,8 @@ export const useStyles = createThemedStyles('Tooltip', {
     letterSpacing: 0.2,
   },
 
+  custom: {},
+
   info: {},
 
   error: {

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useStyles, ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   text: ReactNode;
   /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
+  view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
 }

package/src/constants/phone-info.ts

@@ -1,6 +1,15 @@
 import type { IPhoneInfo } from '../components';
 
 export const phoneInfo: IPhoneInfo[] = [
+  {
+    countryEn: 'Abkhazia',
+    countryRu: 'Абхазия',
+    countryCode: 'AB',
+    phoneMask: '(999) 999-99-99',
+    dialCode: '7',
+    dialCodePriority: 1,
+    fullCodes: ['7'],
+  },
   {
     countryEn: 'Afghanistan',
     countryRu: 'Афганистан',
@@ -785,40 +794,9 @@ export const phoneInfo: IPhoneInfo[] = [
     countryRu: 'Казахстан',
     countryCode: 'KZ',
     dialCode: '7',
-    phoneMask: '999 999-99-99',
+    phoneMask: '(999) 999-99-99',
     dialCodePriority: 1,
-    areaCodes: [
-      '310',
-      '311',
-      '312',
-      '313',
-      '315',
-      '318',
-      '321',
-      '324',
-      '325',
-      '326',
-      '327',
-      '336',
-      '7172',
-      '73622',
-    ],
-    fullCodes: [
-      '7310',
-      '7311',
-      '7312',
-      '7313',
-      '7315',
-      '7318',
-      '7321',
-      '7324',
-      '7325',
-      '7326',
-      '7327',
-      '7336',
-      '77172',
-      '773622',
-    ],
+    fullCodes: ['7'],
   },
   {
     countryEn: 'Kenya',
@@ -1404,6 +1382,15 @@ export const phoneInfo: IPhoneInfo[] = [
     phoneMask: '999 9999 9999',
     fullCodes: ['82'],
   },
+  {
+    countryCode: 'OS',
+    countryEn: 'South Ossetia',
+    countryRu: 'Южная Осетия',
+    phoneMask: '(999) 999-99-99',
+    dialCode: '7',
+    dialCodePriority: 1,
+    fullCodes: ['7'],
+  },
   {
     countryEn: 'South Sudan',
     countryRu: 'Южный Судан',

package/src/helpers/phone.ts

@@ -1,4 +1,4 @@
-import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isNotEmpty, isStringEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { IPhoneInfo, IPhoneValue } from '../components';
 import { phoneInfo } from '../constants';
 
@@ -46,22 +46,26 @@ export const getFullPhone = (phone?: IPhoneValue): string =>
   (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
 
 export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
+  if (isStringEmpty(phoneWithCode)) {
+    return;
   }
 
-  return countryCode;
+  // ищем страны, для которых phoneWithCode начинается с fullCode (dialCode + areaCode)
+  const matchedCountries = phoneInfo.filter((info) =>
+    info.fullCodes.some((fullCode) => phoneWithCode.startsWith(fullCode)),
+  );
+
+  // если нашлась всего одна — ок, выдаём её
+  if (matchedCountries.length === 1) {
+    return matchedCountries[0].countryCode;
+  }
+
+  // если нашлось несколько, выбираем страну с наименьшим dialCodePriority (0 — самая приоритетная)
+  const highestPriorityCountries = phoneInfo
+    .filter((info) => phoneWithCode.startsWith(info.dialCode))
+    .sort((a, b) => (a.dialCodePriority ?? 1000) - (b.dialCodePriority ?? 1000));
+
+  return highestPriorityCountries.at(0)?.countryCode;
 };
 
 export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
 export * from './use-merged-refs';
+export * from './use-merge';

package/src/hooks/use-merge.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMerge = <T>(one?: T, two?: T): T | undefined =>
+  useMemo(
+    () => (isNotEmpty(one) && isNotEmpty(two) ? mergeStyles(one, two) : one ?? two),
+    [one, two],
+  );

package/src/hooks/use-mixed-styles.ts

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
-import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import type { IMixedStyles } from '../theme';
+
+export const mixStyles = <T>(...tweakStyles: Array<IMixedStyles<T>>): Array<NonNullable<T>> =>
+  tweakStyles.flat().filter(isObject) as Array<NonNullable<T>>;
 
 export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+  baseStyles?: IMixedStyles<StyleSheet>,
+  tweakStyles?: IMixedStyles<StyleSheet>,
+): Array<NonNullable<StyleSheet>> =>
+  useMemo(() => mixStyles(baseStyles, tweakStyles), [baseStyles, tweakStyles]);

package/src/hooks/use-tweak-styles.ts

@@ -1,11 +1,24 @@
-import { useMemo } from 'react';
-import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
+import { useContext, useMemo } from 'react';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import {
+  areStylesThemed,
+  themedStyles,
+  IComponentName,
+  IMaybeArray,
+  useTheme,
+  JssContext,
+  IMixedStyles,
+} from '../theme';
+import { mixStyles } from './use-mixed-styles';
 
 // TODO: Можно усилить типы
 export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
   innerStyles,
-  tweakStyles: currentComponentTweakStyles,
+  tweakStyles,
   className,
   currentComponentName,
 }: {
@@ -13,12 +26,12 @@ export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet &
    * Это tweakStyles, определенные в родительском компоненте
    * (например, стили для Input, определенные в стилях компонента Select)
    */
-  innerStyles?: StyleSheet[ClassName];
+  innerStyles?: IMixedStyles<StyleSheet[ClassName]>;
   /**
    * Пропса tweakStyles из родительского компонента
    * (это уже непосредственно ISelectProps.tweakStyles)
    */
-  tweakStyles?: StyleSheet;
+  tweakStyles?: IMaybeArray<StyleSheet>;
   /**
    * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
    */
@@ -27,31 +40,40 @@ export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet &
    * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
    */
   currentComponentName?: IComponentName;
-}): StyleSheet[ClassName] =>
-  useMemo(() => {
-    const theme = getTheme();
-    // tweakStyles, переопределенные в теме родительского компонента
+}): Array<NonNullable<StyleSheet[ClassName]>> => {
+  const theme = useTheme();
+  const isMergeDisabled = isNotEmpty(useContext(JssContext).tweakStylesArch);
+
+  return useMemo(() => {
     const themeStyles = isNotEmpty(currentComponentName)
-      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
+      ? (theme.components?.[currentComponentName] as StyleSheet)
       : undefined;
-    const tweakStyles = currentComponentTweakStyles?.[className];
 
-    // Если нечего мержить
-    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
-    if (styles.length <= 1) {
-      return styles[0];
+    const resultStyles = mixStyles(
+      innerStyles,
+      mixStyles(themeStyles, tweakStyles).map((style) => style[className]),
+    );
+
+    if (isMergeDisabled || resultStyles.length < 2) {
+      return resultStyles;
+    }
+
+    const [maybeInnerStyles, maybeThemeStyles, ...rest] = resultStyles;
+
+    if (
+      maybeThemeStyles !== themeStyles?.[className] || // Если нет themeStyles или innerStyles
+      isArrayNotEmpty(rest) // Или есть tweakStyles
+    ) {
+      // Мёржим как есть
+      return [mergeStyles(maybeInnerStyles, maybeThemeStyles, ...rest)];
     }
 
-    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
-    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
-      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
+    // Иначе мёржим themeStyles в innerStyles
+    if (!areStylesThemed(maybeInnerStyles)) {
+      themedStyles(maybeInnerStyles, maybeThemeStyles);
     }
 
-    // Ну тут уже прощай кэш
-    return mergeStyles(innerStyles, themeStyles, tweakStyles);
-  }, [
-    innerStyles,
-    className,
-    currentComponentName,
-    currentComponentTweakStyles,
-  ]) as StyleSheet[ClassName];
+    // И возвращаем только innerStyles
+    return [maybeInnerStyles];
+  }, [innerStyles, className, currentComponentName, tweakStyles, theme, isMergeDisabled]);
+};

package/src/theme/Provider.tsx

@@ -1,6 +1,6 @@
-import { createContext, FC, ReactNode } from 'react';
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react';
 import { common } from './common';
-import { IUiKitTheme } from './types';
+import type { IUiKitTheme } from './types';
 
 export interface IThemedProviderProps {
   theme: IUiKitTheme;
@@ -11,11 +11,16 @@ let globalTheme: IUiKitTheme;
 
 export const getTheme = (): IUiKitTheme => globalTheme;
 
-export const ThemeContext = createContext<{
+interface ThemeContextValue {
   theme: IUiKitTheme;
-}>({ theme: common });
+}
+
+export const ThemeContext = createContext<ThemeContextValue>({ theme: common });
 
 export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
   globalTheme = theme;
-  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+  const value: ThemeContextValue = useMemo(() => ({ theme }), [theme]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
+
+export const useTheme = (): IUiKitTheme => useContext(ThemeContext).theme;