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

package/src/components/WithTooltip/WithTooltip.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { IWithTooltipProps, WithTooltip } from './WithTooltip';
 
 const positions = [
   'top',
@@ -16,20 +17,23 @@ const positions = [
   'left-end',
 ];
 
-const meta: Meta<typeof WithTooltip> = {
-  title: 'Data Display/WithTooltip',
-  component: WithTooltip,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-export default meta;
-type IStory = StoryObj<typeof WithTooltip>;
+const Story: FC<IWithTooltipProps> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <WithTooltip {...args} />
+  </div>
+);
 
-export const Default: IStory = {
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithTooltip',
+  component: Story,
   args: {
     children: 'Наведи на меня - появится тултип',
     tooltipText: 'Текст тултипа',
@@ -40,17 +44,13 @@ export const Default: IStory = {
     isDisabled: false,
     shouldRenderInBody: true,
   },
-  render: (args) => (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 600,
-        height: 400,
-      }}
-    >
-      <WithTooltip {...args} />
-    </div>
-  ),
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/WithTooltip/WithTooltip.tsx

@@ -22,6 +22,8 @@ export interface IWithTooltipProps
   tooltipView?: ITooltipProps['view'];
   /** @default 'info' */
   tooltipType?: ITooltipProps['type'];
+  /** @default 'undefined' */
+  tooltipSize?: ITooltipProps['size'];
 }
 
 export const WithTooltip: FC<IWithTooltipProps> = ({
@@ -31,6 +33,7 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
   tooltipText,
   tooltipView = 'tooltip',
   tooltipType = 'info',
+  tooltipSize,
   isDisabled = false,
   popupData,
   tweakStyles,
@@ -64,6 +67,7 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
         view={tooltipView}
         type={tooltipType}
         text={tooltipText}
+        size={tooltipSize}
         tweakStyles={tweakTooltipStyles}
         testId={getTestId(restProps.testId, 'tooltip')}
       />

package/src/components/index.ts

@@ -3,7 +3,6 @@ export * from './AddButton';
 export * from './Button';
 export * from './Checkbox';
 export * from './CloseButton';
-export * from './Colors';
 export * from './CssBaseline';
 export * from './DateInput';
 export * from './DatePicker';
@@ -13,6 +12,7 @@ export * from './FileItem';
 export * from './FiltersPane';
 export * from './Flag';
 export * from './FlexibleTable';
+export * from './FloatDocActions';
 export * from './Icon';
 export * from './IconButton';
 export * from './IncrementInput';

package/src/helpers/misc.ts

@@ -1,4 +1,4 @@
-import hexToRgba from 'hex-to-rgba';
+import { ComponentType, memo } from 'react';
 import {
   isNotEmpty,
   isString,
@@ -6,7 +6,7 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { IDataAttributes } from '../types';
 
-export const rgba = hexToRgba;
+export { default as rgba } from 'hex-to-rgba';
 
 /** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
 export const transformToKebab = (string: string): string => {
@@ -22,6 +22,11 @@ export const transformToKebab = (string: string): string => {
   return result;
 };
 
+export const getParentNode = (element: Element | ShadowRoot | Document): Element =>
+  element.nodeName === 'HTML' || element === document
+    ? (element as Element)
+    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
+
 export const hasExactParent = (element: Element, parent: Element): boolean => {
   if (element === parent) {
     return true; // Found the exact parent
@@ -36,11 +41,6 @@ export const hasExactParent = (element: Element, parent: Element): boolean => {
   return hasExactParent(parentNode, parent);
 };
 
-export const getParentNode = (element: Element | ShadowRoot | Document): Element =>
-  element.nodeName === 'HTML' || element === document
-    ? (element as Element)
-    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
-
 export const getStyleComputedProperty = (element: Element): Partial<CSSStyleDeclaration> =>
   element.nodeType !== 1 ? {} : getComputedStyle(element, null);
 
@@ -158,3 +158,11 @@ export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =
         : [],
     ),
   );
+
+export const excludeStorybookParams = (params: string[]): RegExp =>
+  new RegExp(`^(on.*|${['tweakStyles', 'data', ...params].join('|')})$`);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const genericMemo = memo as <T extends ComponentType<any>>(
+  ...args: Parameters<typeof memo<T>>
+) => T;

package/src/helpers/popper-helpers.ts

@@ -1,6 +1,5 @@
 import { Modifier } from 'react-overlays/usePopper';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const minWidthModifier: Partial<Modifier<any, any>> = {
   name: 'minWidth',
   enabled: true,

package/src/hooks/index.ts

@@ -1,8 +1,11 @@
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-ref';
+export * from './use-resize-ref';
 export * from './use-is-mounted';
+export * from './use-latest-ref';
+export * from './use-merge';
+export * from './use-merged-refs';
+export * from './use-mixed-styles';
 export * from './use-on-click-outside';
-export * from './use-dropdown';
 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-intersection-ref.ts

@@ -0,0 +1,48 @@
+import { RefCallback, useEffect, 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;
+  observerOptions?: IntersectionObserverInit;
+}
+
+export const useIntersectionRef = ({
+  observerOptions,
+  ...options
+}: IInsertionRefOptions): RefCallback<Element> => {
+  const optionsRef = useLatestRef(options);
+
+  const { ref, disconnect } = useMemo(() => {
+    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+      const { current } = optionsRef;
+      if (current?.isDisabled) {
+        return;
+      }
+      if (isIntersecting) {
+        current?.onIntersection?.();
+      } else {
+        current?.onIntersectionEnd?.();
+      }
+    }, observerOptions);
+
+    const observerRef: RefCallback<Element> = (node) => {
+      observer.disconnect();
+      if (isNotEmpty(node)) {
+        observer.observe(node);
+      }
+    };
+
+    return {
+      ref: observerRef,
+      disconnect: () => observer.disconnect(),
+    };
+  }, [optionsRef, observerOptions]);
+
+  useEffect(() => disconnect, [disconnect]);
+
+  return ref;
+};

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

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

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

@@ -1,4 +1,6 @@
 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)) {
@@ -33,37 +35,43 @@ export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElem
 };
 
 export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
+  refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined,
   handler: (event: MouseEvent | TouchEvent) => void,
   ignoreRef?: RefObject<IgnoreElem>,
 ): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
+  useOnClickOutside(refOrGetter, handler, undefined, ignoreRef);
 }
 
 export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
+  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) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
+      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 (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+        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;
       }
 
-      handler(event);
+      options.handler(event);
     };
 
     document.addEventListener('mousedown', listener);
@@ -73,5 +81,5 @@ export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends H
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, [ref, handler, ignoreClassName]);
+  }, [optionsRef]);
 }

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

@@ -0,0 +1,42 @@
+import { RefCallback, useMemo, useEffect } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
+
+export interface IResizeRefOptions<T extends Element> {
+  /** @default false */
+  isDisabled?: boolean;
+  onChange?: (entry: ResizeObserverEntry) => void;
+  onTargetChange?: (target: T) => void;
+}
+
+export const useResizeRef = <T extends Element>(options: IResizeRefOptions<T>): RefCallback<T> => {
+  const optionsRef = useLatestRef(options);
+
+  const { ref, disconnect } = useMemo(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      const { current } = optionsRef;
+      if (!current.isDisabled) {
+        current.onChange?.(entry);
+        current.onTargetChange?.(entry.target as T);
+      }
+    });
+
+    const observerRef: RefCallback<T> = (node) => {
+      observer.disconnect();
+      if (!isNotEmpty(node)) {
+        return;
+      }
+
+      observer.observe(node);
+      if (!optionsRef.current.isDisabled) {
+        optionsRef.current.onTargetChange?.(node);
+      }
+    };
+
+    return { ref: observerRef, disconnect: () => observer.disconnect() };
+  }, [optionsRef]);
+
+  useEffect(() => disconnect, [disconnect]);
+
+  return ref;
+};

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

@@ -1,18 +1,6 @@
-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 { useMemo } from 'react';
+import { IMaybeArray } from '@true-engineering/true-react-platform-helpers';
+import { IComponentName, IMixedStyles, useThemeComponentStyles } from '../theme';
 import { mixStyles } from './use-mixed-styles';
 
 // TODO: Можно усилить типы
@@ -37,43 +25,18 @@ export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet &
    */
   className: ClassName;
   /**
-   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
+   * Название компонента который вызывает useTweakStyles
    */
   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]);
+  const themeStyles = useThemeComponentStyles<StyleSheet>(currentComponentName);
+
+  return useMemo(
+    () =>
+      mixStyles(
+        innerStyles,
+        mixStyles(themeStyles, tweakStyles).map((style) => style[className]),
+      ),
+    [innerStyles, className, themeStyles, tweakStyles],
+  );
 };

package/src/theme/Provider.tsx

@@ -1,26 +1,9 @@
-import { createContext, FC, ReactNode, useContext, useMemo } from 'react';
+import { createContext, useContext } from 'react';
 import { common } from './common';
 import type { IUiKitTheme } from './types';
 
-export interface IThemedProviderProps {
-  theme: IUiKitTheme;
-  children: ReactNode;
-}
+export const ThemeContext = createContext<IUiKitTheme>(common);
 
-let globalTheme: IUiKitTheme;
+export const ThemeProvider = ThemeContext.Provider;
 
-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;
+export const useTheme = (): IUiKitTheme => useContext(ThemeContext);

package/src/theme/common.ts

@@ -1,4 +1,3 @@
-import { Styles } from 'react-jss';
 import { IUiKitHelpers, IUiKitTheme } from './types';
 
 export const colors = {
@@ -49,41 +48,40 @@ export const dimensions = {
 } as const;
 
 export const helpers = {
-  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100): Styles =>
-    ({
-      display: 'inline-block',
-      position: 'relative',
-      marginTop: angleSize * 2 - 1,
-      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
-      border: ['solid', 1, colors.BORDER_MAIN],
-      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
-
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize,
-        left: position === 'left' && distance,
-        right: position === 'right' && distance,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize, 'solid', 'transparent'],
-        borderRight: [angleSize, 'solid', 'transparent'],
-        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
-      },
+  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100) => ({
+    display: 'inline-block',
+    position: 'relative',
+    marginTop: angleSize * 2 - 1,
+    boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
+    border: ['solid', 1, colors.BORDER_MAIN],
+    borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
+
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      top: -angleSize,
+      left: position === 'left' && distance,
+      right: position === 'right' && distance,
+      width: 0,
+      height: 0,
+      borderLeft: [angleSize, 'solid', 'transparent'],
+      borderRight: [angleSize, 'solid', 'transparent'],
+      borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
+    },
 
-      '&:after': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize + 1,
-        left: position === 'left' && distance + 1,
-        right: position === 'right' && distance + 1,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize - 1, 'solid', 'transparent'],
-        borderRight: [angleSize - 1, 'solid', 'transparent'],
-        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
-      },
-    } as unknown as Styles),
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      top: -angleSize + 1,
+      left: position === 'left' && distance + 1,
+      right: position === 'right' && distance + 1,
+      width: 0,
+      height: 0,
+      borderLeft: [angleSize - 1, 'solid', 'transparent'],
+      borderRight: [angleSize - 1, 'solid', 'transparent'],
+      borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
+    },
+  }),
 
   withScrollBar: {
     boxSizing: 'border-box',
@@ -135,7 +133,6 @@ const SLIDE_UP_POSITION_END = 0;
 
 export const animations = {
   defaultTransition: '0.25s ease-in-out',
-  // Если понадобится, сюда можно пробросить параметры через useTheme props
   slideUp: {
     'slide-up-enter': {
       opacity: 0,