@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha20

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -91,6 +91,7 @@ Default.args = {
   shouldRenderInBody: true,
   shouldHideOnScroll: false,
   shouldStopPropagation: true,
+  shouldShowArrow: false,
 };
 
 Default.parameters = {

package/src/components/WithPopup/WithPopup.styles.ts

@@ -20,6 +20,8 @@ export const useStyles = createThemedStyles('WithPopup', {
     outline: 'none',
   },
 
+  arrow: {},
+
   animationEnd: {},
 
   animationStart: {},

package/src/components/WithPopup/WithPopup.tsx

@@ -1,7 +1,6 @@
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
   applyAction,
   stopPropagation,
   addDataAttributes,
@@ -23,10 +22,18 @@ import {
   UseHoverProps,
   safePolygon,
   useFocus,
+  FloatingArrow,
+  arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
-import { ICommonProps, IRenderNode } from '../../types';
+import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
+import { minWidthRelativeToTrigger } from './helpers';
 import {
+  IPopupArrowProps,
   IPopupEventType,
   IReferenceProps,
   IWithPopupChildrenProps,
@@ -43,11 +50,16 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   placement?: Placement;
   /** @default 'click' */
   eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
+  /**
+   * @deprecated Используйте hoverOptions
+   * @default 0
+   */
+  hoverDelay?: number;
   /** @default 6 */
   popupOffset?: OffsetOptions;
-  /** @default true */
+  arrowProps?: IPopupArrowProps;
+  popupData?: IDataAttributes;
+  /** @default true, if eventType === click */
   shouldStopPropagation?: boolean;
   /** @default false */
   shouldHideOnScroll?: boolean;
@@ -60,6 +72,16 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   canBeFlipped?: boolean;
   /** @default false */
   isDisabled?: boolean;
+  /** @default false */
+  shouldShowArrow?: boolean;
+  /** Должна ли минимальная ширина попапа быть равна ширине триггера
+   * @default false */
+  isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -71,12 +93,21 @@ export const WithPopup: FC<IWithPopupProps> = ({
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
-  shouldStopPropagation = true,
+  arrowProps,
+  popupData,
+  shouldStopPropagation = eventType === 'click',
   shouldHideOnScroll = false,
   shouldRenderInBody = true,
   canBeFlipped = true,
   isTriggerWrapped = eventType === 'hover',
   isDisabled = false,
+  shouldShowArrow = false,
+  isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -86,6 +117,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const arrowRef = useRef<SVGSVGElement>(null);
+
   const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
     if (!isDisabled) {
@@ -103,7 +136,9 @@ export const WithPopup: FC<IWithPopupProps> = ({
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
+      shouldShowArrow && arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
     placement,
@@ -112,22 +147,27 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const hover = useHover(context, {
     enabled: eventType === 'hover',
-    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    delay: { open: hoverDelay, close: 0 },
     handleClose: safePolygon(),
+    ...hoverOptions,
   });
 
-  const focus = useFocus(context, { enabled: eventType === 'hover' });
+  const focus = useFocus(context, { enabled: eventType === 'hover', ...focusOptions });
 
-  const click = useClick(context, { enabled: eventType === 'click' });
+  const click = useClick(context, { enabled: eventType === 'click', ...clickOptions });
 
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
     ancestorScroll: shouldHideOnScroll,
+    ...dismissOptions,
   });
 
   const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
 
-  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
+  const { isMounted, status } = useTransitionStatus(context, {
+    duration: { close: 500 },
+    ...transitionOptions,
+  });
 
   const referenceProps: IReferenceProps = getReferenceProps({
     ref: refs.setReference,
@@ -155,8 +195,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isOpen,
           })}
           {...referenceProps}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
         >
           {triggerElement}
         </div>
@@ -165,16 +204,25 @@ export const WithPopup: FC<IWithPopupProps> = ({
       )}
       {isMounted && (
         <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
+          root={shouldRenderInBody ? document.body : (refs.reference.current as HTMLElement)}
         >
           <div
+            ref={refs.setFloating}
             style={floatingStyles}
             className={classes.popup}
-            ref={refs.setFloating}
             {...getFloatingProps()}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
-              {applyAction(children, { onClose: handleClose })}
+              {shouldShowArrow && (
+                <FloatingArrow
+                  {...arrowProps}
+                  ref={arrowRef}
+                  context={context}
+                  className={classes.arrow}
+                />
+              )}
+              {applyAction(children, { floatingContext: context, onClose: handleClose })}
             </div>
           </div>
         </FloatingPortal>

package/src/components/WithPopup/helpers.ts

@@ -0,0 +1,9 @@
+import { Middleware, size } from '@floating-ui/react';
+
+export const minWidthRelativeToTrigger: Middleware = size({
+  apply({ rects, elements }) {
+    Object.assign(elements.floating.style, {
+      minWidth: `${rects.reference.width}px`,
+    });
+  },
+});

package/src/components/WithPopup/types.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent, KeyboardEvent } from 'react';
+import type { FloatingArrowProps, UseFloatingReturn } from '@floating-ui/react';
 import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
 import type { POPUP_EVENT_TYPES } from './constants';
 
@@ -21,5 +22,11 @@ export interface IWithPopupTriggerProps {
 }
 
 export interface IWithPopupChildrenProps {
+  floatingContext: UseFloatingReturn['context'];
   onClose: (event?: IWithPopupToggleEvent) => void;
 }
+
+export type IPopupArrowProps = Pick<
+  FloatingArrowProps,
+  'width' | 'height' | 'tipRadius' | 'staticOffset' | 'd' | 'stroke' | 'strokeWidth'
+>;

package/src/components/WithTooltip/WithTooltip.styles.ts

@@ -1,6 +1,12 @@
 import { ITooltipStyles } from '../Tooltip';
 import { IWithPopupStyles } from '../WithPopup';
 
+export const withPopupStyles: IWithPopupStyles = {
+  popup: {
+    zIndex: 9999,
+  },
+};
+
 export interface IWithTooltipStyles {
   tweakWithPopup?: IWithPopupStyles;
   tweakTooltip?: ITooltipStyles;

package/src/components/WithTooltip/WithTooltip.tsx

@@ -4,7 +4,7 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
-import { IWithTooltipStyles } from './WithTooltip.styles';
+import { IWithTooltipStyles, withPopupStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
@@ -32,17 +32,21 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
   tooltipView = 'tooltip',
   tooltipType = 'info',
   isDisabled = false,
+  popupData,
   tweakStyles,
   ...restProps
 }) => {
   const tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
     tweakStyles,
     className: 'tweakWithPopup',
+    currentComponentName: 'WithTooltip',
   });
 
   const tweakTooltipStyles = useTweakStyles({
     tweakStyles,
     className: 'tweakTooltip',
+    currentComponentName: 'WithTooltip',
   });
 
   return (
@@ -50,8 +54,9 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
       trigger={children}
       placement={placement}
       eventType={eventType}
-      isTriggerWrapped
+      popupData={{ ...popupData, tooltipView }}
       isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
+      isTriggerWrapped
       tweakStyles={tweakWithPopupStyles}
       {...restProps}
     >

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;

package/src/theme/common.ts

@@ -91,9 +91,12 @@ export const helpers = {
 
     // Chromium
     '@supports selector(::-webkit-scrollbar)': {
+      '--webkit-scrollbar-width': '10px',
+      '--webkit-scrollbar-height': '10px',
+
       '&::-webkit-scrollbar': {
-        height: 10,
-        width: 10,
+        width: 'var(--webkit-scrollbar-width)',
+        height: 'var(--webkit-scrollbar-height)',
 
         '&-thumb': {
           width: 6,

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;
+  };
+}