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

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;

package/src/theme/create-themed-styles.ts

@@ -0,0 +1,78 @@
+import { useContext, useInsertionEffect, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { mixStyles } from '../hooks/use-mixed-styles';
+import { getTheme, useTheme } from './Provider';
+import {
+  checkStyles,
+  cleanStyles,
+  getTweakStylesCache,
+  isStylesNotEmpty,
+  mergeTweakStyles,
+} from './helpers';
+import { ThemedStylesManager, JssContext } from './true-jss';
+import { IComponentName, IStyles, IUseStyles } from './types';
+
+const DEFAULT_NAME = 'LocalComponent';
+
+export function createThemedStyles<C extends string>(
+  ...args: [IStyles<C>] | [IComponentName, IStyles<C>]
+): IUseStyles<C> {
+  const [componentName, styles] = args.length === 2 ? args : [undefined, args[0]];
+  const name = componentName ?? DEFAULT_NAME;
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkStyles(name, styles);
+  }
+
+  const tweakStylesManager = new ThemedStylesManager({ styles, name });
+  const tweakStylesCache = getTweakStylesCache();
+
+  const useStyles = createUseStyles<C>((tweakStyles) => {
+    const theme = getTheme();
+    return mergeStyles(
+      styles as Styles<C>,
+      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C>) : undefined,
+      tweakStyles,
+    );
+  });
+
+  return (data) => {
+    const jssContext = useContext(JssContext);
+
+    const tweakStyles = useMemo(
+      () => mixStyles(data?.theme).filter(isStylesNotEmpty),
+      [data?.theme],
+    );
+
+    if (jssContext.tweakStylesArch !== 'true-jss') {
+      const tweakStylesStrategy =
+        jssContext.tweakStylesArch === 'react-jss' ? tweakStylesCache : mergeTweakStyles;
+
+      const theme = useMemo(
+        () => cleanStyles(tweakStylesStrategy(tweakStyles)),
+        [tweakStylesStrategy, tweakStyles],
+      );
+
+      return useStyles(isNotEmpty(data) ? { ...data, theme } : data);
+    }
+
+    const { components } = useTheme();
+
+    const themeStyles = isNotEmpty(componentName) ? components?.[componentName] : undefined;
+
+    const classes = tweakStylesManager.getClasses(themeStyles, tweakStyles, jssContext);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manage(themeStyles);
+      return unmanage;
+    }, [themeStyles]);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manageTweak(themeStyles, tweakStyles);
+      return unmanage;
+    }, [themeStyles, classes]);
+
+    return classes;
+  };
+}

package/src/theme/helpers.ts

@@ -1,29 +1,31 @@
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
+import { merge } from 'lodash-es';
 import {
   isArrayNotEmpty,
   isNotEmpty,
   mergeStyles,
 } from '@true-engineering/true-react-platform-helpers';
-import { getTheme } from './Provider';
-import { IComponentName, IStyles, IUseStyles } from './types';
+import { IMaybeArray } from './types';
 
 const EMPTY_STYLES = {};
 
-const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
+export const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
 
-const cleanStyles = <T>(tweakStyles?: T): T =>
-  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
-    ? tweakStyles
-    : (EMPTY_STYLES as T);
+export const isStylesNotEmpty = <T>(tweakStyles?: T): tweakStyles is NonNullable<T> =>
+  isNotEmpty(tweakStyles) && !Object.keys(tweakStyles).every(isTweakStyle);
 
-const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
-  const invalidClasses = Object.keys(styles).reduce((acc, key) => {
-    if (isTweakStyle(key)) {
-      acc.push(key);
-    }
-    return acc;
-  }, [] as string[]);
+export const cleanStyles = <T>(tweakStyles?: T): T =>
+  isStylesNotEmpty(tweakStyles) ? tweakStyles : (EMPTY_STYLES as T);
+
+export const mergeTweakStyles = <T>(tweakStyles?: IMaybeArray<T>): T | undefined => {
+  if (!Array.isArray(tweakStyles)) {
+    return tweakStyles;
+  }
+  const [first, ...rest] = tweakStyles;
+  return isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+};
+
+export const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
+  const invalidClasses = Object.keys(styles).filter(isTweakStyle);
 
   if (isArrayNotEmpty(invalidClasses)) {
     console.error(
@@ -47,30 +49,30 @@ export const themedStyles = <T>(styles: T, themeComponentStyles: T): T => {
   return styles;
 };
 
-export function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
+type TweakStylesCache = (styles: object[], prev?: object[]) => object | undefined;
+export const getTweakStylesCache = (): TweakStylesCache => {
+  let mergedStyles: object | undefined;
+  const cache = new WeakMap<object, TweakStylesCache>();
+
+  const getNext = (next: object) => {
+    if (!cache.has(next)) {
+      cache.set(next, getTweakStylesCache());
+    }
 
-export function createThemedStyles<C extends string, P>(
-  componentName: IComponentName,
-  styles: IStyles<C, P>,
-): IUseStyles<C, P>;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return cache.get(next)!;
+  };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createThemedStyles<C extends string, P>(...args: any[]): IUseStyles<C, P> {
-  const shouldUseTheme = args.length > 1;
-  const styles: IStyles<C, P> = shouldUseTheme ? args[1] : args[0];
-  const componentName: IComponentName | undefined = shouldUseTheme ? args[0] : undefined;
+  return (styles, prev = []) => {
+    const [next, ...rest] = styles;
+    if (isNotEmpty(next)) {
+      return getNext(next)(rest, prev.concat(next));
+    }
 
-  if (process.env.NODE_ENV !== 'production') {
-    checkStyles(componentName ?? 'LocalComponent', styles);
-  }
-  const useStyles = createUseStyles<C, P>((tweakStyles) => {
-    const theme = getTheme();
-    return mergeStyles(
-      styles as Styles<C, P>,
-      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C, P>) : undefined,
-      tweakStyles,
-    );
-  });
+    if (isNotEmpty(mergedStyles)) {
+      return mergedStyles;
+    }
 
-  return (data) => useStyles(isNotEmpty(data) ? { ...data, theme: cleanStyles(data.theme) } : data);
-}
+    return (mergedStyles = mergeTweakStyles(prev));
+  };
+};

package/src/theme/index.ts

@@ -1,4 +1,6 @@
 export * from './Provider';
+export * from './true-jss';
 export * from './common';
 export * from './types';
 export * from './helpers';
+export * from './create-themed-styles';

package/src/theme/true-jss/ThemedStylesManager.ts

@@ -0,0 +1,93 @@
+import { jss } from 'react-jss';
+import type { Classes, StyleSheet } from 'jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { IStyles } from '../types';
+import { IPartialStyle, TweakStylesManager } from './TweakStylesManager';
+import { IJssContext } from './jss-context';
+
+interface IStyleSheet<C extends string> {
+  manager: TweakStylesManager<C>;
+  refs: number;
+  sheet: StyleSheet<C>;
+  detachTimeout?: number;
+}
+
+const NO_THEME_STYLES: IPartialStyle = {};
+
+interface IThemedStylesManagerOptions<C extends string> {
+  styles: IStyles<C>;
+  name: string;
+}
+
+export class ThemedStylesManager<C extends string> {
+  #styleSheetMap = new Map<IPartialStyle, IStyleSheet<C>>();
+  #styles: IStyles<C>;
+  #name: string;
+
+  constructor({ styles, name }: IThemedStylesManagerOptions<C>) {
+    this.#styles = styles;
+    this.#name = name;
+  }
+
+  public getClasses(
+    theme = NO_THEME_STYLES,
+    tweak: IPartialStyle[],
+    jssContext: IJssContext,
+  ): Classes<C> {
+    return this.getOrCreate(theme, jssContext).manager.getClasses(tweak);
+  }
+
+  public manageTweak(theme = NO_THEME_STYLES, tweak: IPartialStyle[]): VoidFunction | undefined {
+    this.#styleSheetMap.get(theme)?.manager.manage(tweak);
+
+    return () => this.#styleSheetMap.get(theme)?.manager.unmanage(tweak);
+  }
+
+  public manage(theme = NO_THEME_STYLES): VoidFunction | undefined {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value)) {
+      return;
+    }
+    if (isNotEmpty(value.detachTimeout)) {
+      clearTimeout(value.detachTimeout);
+      value.detachTimeout = undefined;
+    }
+    value.refs += 1;
+    if (value.refs > 0) {
+      value.sheet.attach();
+    }
+
+    return () => this.unmanage(theme);
+  }
+
+  private unmanage(theme = NO_THEME_STYLES): void {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value) || value.refs === 0) {
+      return;
+    }
+    value.refs -= 1;
+    if (value.refs === 0 && !isNotEmpty(value.detachTimeout)) {
+      value.detachTimeout = window.setTimeout(() => {
+        if (value.refs === 0) {
+          value.sheet.detach();
+        }
+      }, 100);
+    }
+  }
+
+  private getOrCreate(theme: IPartialStyle, jssContext: IJssContext): IStyleSheet<C> {
+    if (!this.#styleSheetMap.has(theme)) {
+      const sheet = jss.createStyleSheet(mergeStyles(this.#styles, theme), {
+        link: true,
+        meta: this.#name,
+        generateId: jssContext.generateId,
+      });
+      const classes = { ...sheet.classes };
+      const manager = new TweakStylesManager({ sheet, classes });
+      this.#styleSheetMap.set(theme, { sheet, manager, refs: 0 });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this.#styleSheetMap.get(theme)!;
+  }
+}

package/src/theme/true-jss/TweakStylesManager.ts

@@ -0,0 +1,156 @@
+import type { Classes, Rule, StyleSheet } from 'jss';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  joinStrings,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { isTweakStyle } from '../helpers';
+
+export type IPartialStyle = object;
+
+interface TweakRules<C extends string> {
+  classes: Classes<C>;
+  refs?: number;
+  rules: Map<C, Rule>;
+}
+
+interface TweakStylesManagerOptions<C extends string> {
+  sheet: StyleSheet<C>;
+  classes: Classes<C>;
+  tweak?: IPartialStyle[];
+}
+
+export class TweakStylesManager<C extends string> {
+  #map = new WeakMap<IPartialStyle, TweakStylesManager<C>>();
+  #sheet: StyleSheet<C>;
+  #classes: Classes<C>;
+  #tweak: IPartialStyle[];
+
+  #tweakRules: TweakRules<C> | undefined;
+  constructor({ sheet, classes, tweak = [] }: TweakStylesManagerOptions<C>) {
+    this.#sheet = sheet;
+    this.#classes = classes;
+    this.#tweak = tweak;
+  }
+
+  public getClasses([next, ...rest]: IPartialStyle[]): Classes<C> {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.getClasses(rest);
+    }
+    return this.getOrCreate()?.classes ?? this.#classes;
+  }
+
+  public manage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.manage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules)) {
+      return;
+    }
+    if (this.#tweakRules.refs === 0) {
+      this.insertRules();
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 0) + 1;
+  }
+
+  public unmanage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.unmanage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules) || this.#tweakRules.refs === 0) {
+      return;
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 1) - 1;
+    if (this.#tweakRules.refs === 0) {
+      this.deleteRules();
+    }
+  }
+
+  private getNextManager(next?: IPartialStyle) {
+    if (!isNotEmpty(next)) {
+      return;
+    }
+    if (!this.#map.has(next)) {
+      const manager = new TweakStylesManager({
+        sheet: this.#sheet,
+        classes: this.#classes,
+        tweak: this.#tweak.concat(next),
+      });
+      this.#map.set(next, manager);
+    }
+    return this.#map.get(next);
+  }
+
+  private getOrCreate() {
+    if (!isNotEmpty(this.#tweakRules) && isArrayNotEmpty(this.#tweak)) {
+      const [first, ...rest] = this.#tweak;
+      const styles = isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+
+      const rules = this.addRules(styles);
+
+      const classes = { ...this.#classes };
+      rules.forEach((rule, key) => {
+        classes[key] = joinStrings([classes[key], rule.id], ' ');
+      });
+
+      this.#tweakRules = { classes, rules };
+    }
+    return this.#tweakRules;
+  }
+
+  private addRules(styles: IPartialStyle) {
+    return new Map(
+      Object.entries(styles)
+        .map(([key, style]) => this.addRule(key as C, style))
+        .filter(isNotEmpty),
+    );
+  }
+
+  private addRule(key: C, style: object) {
+    if (isTweakStyle(key)) {
+      return;
+    }
+    const rule = this.#sheet.addRule(key, style, { index: this.getInsertIndex(key) });
+    return isNotEmpty(rule) ? ([key, rule] as const) : undefined;
+  }
+
+  private insertRules() {
+    this.#tweakRules?.rules.forEach((rule, key) => {
+      this.#sheet.rules.register(rule);
+      this.#sheet.rules.index.splice(this.getInsertIndex(key), 0, rule);
+      this.#sheet.insertRule(rule);
+    });
+  }
+
+  private deleteRules() {
+    this.#tweakRules?.rules.forEach((rule) => this.#sheet.deleteRule(rule));
+  }
+
+  private getInsertIndex(key: C) {
+    return (
+      this.#sheet.rules.index.findIndex((rule) => rule.key === key) + 1 ||
+      this.#sheet.rules.index.length
+    );
+  }
+}
+
+declare module 'jss' {
+  export interface RuleList {
+    index: Rule[];
+  }
+  export interface StyleSheet<RuleName> {
+    rules: RuleList;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    deleteRule(rule: Rule): boolean;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    addRule(
+      name: RuleName,
+      style: JssStyle,
+      options?: Partial<Rule['options']>,
+    ): (Rule & { id: string }) | null;
+  }
+}

package/src/theme/true-jss/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemedStylesManager';
+export * from './jss-context';

package/src/theme/true-jss/jss-context.tsx

@@ -0,0 +1,34 @@
+import { Context, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { JssContext as JssContextLib } from 'react-jss';
+import { GenerateId } from 'jss';
+
+export interface IJssContext {
+  generateId?: GenerateId;
+  tweakStylesArch?: 'react-jss' | 'true-jss';
+}
+
+/** Типизация JssContext оказалась некорректна */
+export const JssContext = JssContextLib as unknown as Context<IJssContext>;
+
+export const JssProvider: FC<PropsWithChildren<IJssContext>> = ({
+  children,
+  tweakStylesArch,
+  generateId,
+}) => {
+  const context = useContext(JssContext);
+
+  const value: IJssContext = useMemo(
+    () => ({
+      ...context,
+      tweakStylesArch: tweakStylesArch ?? context.tweakStylesArch,
+      generateId: generateId ?? context.generateId,
+    }),
+    [context, tweakStylesArch, generateId],
+  );
+
+  return (
+    <JssContext.Provider key={tweakStylesArch} value={value}>
+      {children}
+    </JssContext.Provider>
+  );
+};

package/src/theme/types.ts

@@ -6,15 +6,13 @@ import type {
   IButtonStyles,
   ICheckboxStyles,
   ICloseButtonStyles,
-  ICommonIcon,
-  IComplexIcon,
-  IWithMessagesStyles,
   IControlWrapperStyles,
   ICssBaselineStyles,
   IDateInputStyles,
   IDatePickerHeaderStyles,
   IDatePickerStyles,
   IDescriptionStyles,
+  IDocActionsStyles,
   IDotsPreloaderStyles,
   IFileInputStyles,
   IFileItemStyles,
@@ -32,6 +30,7 @@ import type {
   IFlexibleTableStyles,
   IIconButtonStyles,
   IIconStyles,
+  IIconType,
   IIncrementInputStyles,
   IInputStyles,
   IListItemStyles,
@@ -63,14 +62,17 @@ import type {
   IThemedPreloaderStyles,
   IToasterStyles,
   ITooltipStyles,
+  IWithMessagesStyles,
   IWithPopupStyles,
   IWithTooltipStyles,
 } from '../components';
 
-export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
+export type IStyles<C extends string, P = unknown> = Styles<C, P, Partial<Styles<C, P>>>;
 
+export type IMaybeArray<T> = T[] | T;
+export type IMixedStyles<T> = IMaybeArray<T | boolean | undefined>;
 export type IUseStyles<C extends string, P = unknown> = (
-  data?: P & { theme?: Partial<Styles<C, P>> },
+  data?: P & { theme?: IMaybeArray<Partial<Styles<C, P>>> },
 ) => Classes<C>;
 
 export type ITweakStyles<
@@ -91,6 +93,7 @@ export interface IComponentStyles {
   DatePicker: IDatePickerStyles;
   DatePickerHeader: IDatePickerHeaderStyles;
   Description: IDescriptionStyles;
+  DocActions: IDocActionsStyles;
   DotsPreloader: IDotsPreloaderStyles;
   SvgPreloader: ISvgPreloaderStyles;
   FileInput: IFileInputStyles;
@@ -145,14 +148,12 @@ export interface IComponentStyles {
 
 export type IComponentName = keyof IComponentStyles;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type IUiKitAnimations = Record<string, any>;
 export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
 
 export interface IUiKitTheme {
   components?: Partial<IComponentStyles>;
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  icons?: Partial<Record<IIconType, ISvgIcon>>;
   preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
   animations?: IUiKitAnimations;
   colors?: Record<string, string>;