@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/hooks/use-dropdown.ts

@@ -1,84 +1,84 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-import { getScrollParent, minWidthModifier } from '../helpers';
-import { IDropdownWithPopperOptions } from '../types';
-
-export const useDropdown = ({
-  isOpen,
-  onDropdownClose,
-  referenceElement,
-  dropdownElement,
-  options,
-  dependenciesForPositionUpdating = [],
-}: {
-  isOpen: boolean;
-  referenceElement: VirtualElement | null | undefined;
-  dropdownElement: HTMLElement | null | undefined;
-  options?: IDropdownWithPopperOptions;
-  dependenciesForPositionUpdating?: DependencyList;
-  onDropdownClose: (event: Event) => void;
-}): ReturnType<typeof usePopper> | undefined => {
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-    scrollParent = 'document',
-    canBeFlipped = false,
-    modifiers = [],
-    placement = 'bottom-start',
-    flipOptions,
-  } = options ?? {};
-
-  useEffect(() => {
-    if (!shouldHideOnScroll || !isOpen) {
-      return;
-    }
-
-    const scrollParentEl =
-      scrollParent === 'auto'
-        ? getScrollParent(referenceElement as Element)
-        : scrollParent === 'document'
-        ? document
-        : scrollParent;
-    scrollParentEl.addEventListener('scroll', onDropdownClose);
-
-    return () => {
-      scrollParentEl.removeEventListener('scroll', onDropdownClose);
-    };
-  }, [shouldHideOnScroll, isOpen]);
-
-  let popperData: ReturnType<typeof usePopper> | undefined;
-  if (shouldUsePopper) {
-    // TODO: Вытащить хук из под условия???
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    popperData = usePopper(referenceElement, dropdownElement, {
-      enabled: isOpen,
-      placement,
-      modifiers: [
-        ...(shouldRenderInBody ? [minWidthModifier] : []),
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 6],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
-            ...flipOptions,
-          },
-        },
-        ...modifiers,
-      ],
-    });
-  }
-
-  useEffect(() => {
-    if (dependenciesForPositionUpdating.length !== 0) {
-      popperData?.update();
-    }
-  }, dependenciesForPositionUpdating);
-
-  return popperData;
-};
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+import { getScrollParent, minWidthModifier } from '../helpers';
+import { IDropdownWithPopperOptions } from '../types';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose: (event: Event) => void;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    // TODO: Вытащить хук из под условия???
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-intersection-ref.ts

@@ -0,0 +1,30 @@
+import { RefCallback, useMemo } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
+
+export interface IInsertionRefOptions {
+  /** @default false */
+  isDisabled?: boolean;
+  onIntersection?: VoidFunction;
+  onIntersectionEnd?: VoidFunction;
+}
+
+export const useIntersectionRef = (options?: IInsertionRefOptions): RefCallback<Element> => {
+  const optionsRef = useLatestRef(options);
+
+  return useMemo(() => {
+    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+      const { current } = optionsRef;
+      if (current?.isDisabled) {
+        return;
+      }
+      if (isIntersecting) {
+        current?.onIntersection?.();
+      } else {
+        current?.onIntersectionEnd?.();
+      }
+    });
+
+    return (node) => (isNotEmpty(node) ? observer.observe(node) : observer.disconnect());
+  }, [optionsRef]);
+};

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-latest-ref.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject, useRef } from 'react';
+
+export const useLatestRef = <T>(value: T): MutableRefObject<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

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-merged-refs.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
-import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
-
-export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);

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';
-
-export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+import { useMemo } from 'react';
+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?: IMixedStyles<StyleSheet>,
+  tweakStyles?: IMixedStyles<StyleSheet>,
+): Array<NonNullable<StyleSheet>> =>
+  useMemo(() => mixStyles(baseStyles, tweakStyles), [baseStyles, tweakStyles]);

package/src/hooks/use-on-click-outside.ts

@@ -1,77 +1,85 @@
-import { RefObject, useEffect } from 'react';
-
-export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-
-  return false;
-};
-
-export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
-  if (element === elToSearch) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-
-  return false;
-};
-
-export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
-}
-
-export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreClassName?: string,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
-      ) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, ignoreClassName]);
-}
+import { RefObject, useEffect } from 'react';
+import { isEmpty, isFunction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
+
+export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(refOrGetter, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  const optionsRef = useLatestRef({ refOrGetter, ignoreRef, ignoreClassName, handler });
+
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const options = optionsRef.current;
+
+      const elem = isFunction(options.refOrGetter)
+        ? options.refOrGetter()
+        : options.refOrGetter?.current;
+      const ignoreElem = options.ignoreRef?.current;
+      const target = event.target as HTMLElement;
+
+      if (
+        isEmpty(elem) ||
+        // Do nothing if clicking ref's element or descendent elements
+        elem.contains(target) ||
+        (isNotEmpty(options.ignoreClassName) &&
+          checkElementParentsClassNames(target, options.ignoreClassName)) ||
+        (isNotEmpty(ignoreElem) && isElementOneOfParents(target, ignoreElem))
+      ) {
+        return;
+      }
+
+      options.handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [optionsRef]);
+}

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

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

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from './theme';
-export * from './components';
-export * from './hooks';
-export * from './types';
-export * from './constants';
-export * from './helpers';
+export * from './theme';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './constants';
+export * from './helpers';

package/src/theme/Provider.tsx

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