@true-engineering/true-react-common-ui-kit 3.53.1 → 3.55.0

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +11,7 @@ export interface IDataAttributesProps extends ITestIdProps {
     data?: IDataAttributes;
 }
 export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
+    tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 export interface IDropdownWithPopperOptions {

package/package.json

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

package/src/components/List/List.tsx

@@ -8,7 +8,8 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
-import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { IListItemProps, ListItem } from './components';
+import { IListItem } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
@@ -29,9 +30,11 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
     }
   };
 
+  const filteredItems = items.filter(({ isHidden }) => !isHidden);
+
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => {
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
           ...item,

package/src/components/List/index.ts

@@ -1,3 +1,4 @@
 export * from './List';
 export type { IListStyles } from './List.styles';
-export { type IListItemStyles, type IListItemProps as IListItem, ListItem } from './components';
+export type { IListItem } from './types';
+export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/src/components/List/types.ts

@@ -0,0 +1,5 @@
+import { IListItemProps } from './components';
+
+export interface IListItem extends IListItemProps {
+  isHidden?: boolean;
+}

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

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;

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,28 @@ 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>();
 
-export function createThemedStyles<C extends string, P>(
-  componentName: IComponentName,
-  styles: IStyles<C, P>,
-): IUseStyles<C, P>;
+  const getNext = (next: object) => {
+    if (!cache.has(next)) {
+      cache.set(next, getTweakStylesCache());
+    }
+    return cache.get(next)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  };
 
-// 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,92 @@
+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 });
+    }
+
+    return this.#styleSheetMap.get(theme)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  }
+}