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

package/src/components/WithPopup/WithPopup.tsx

@@ -24,6 +24,10 @@ import {
   useFocus,
   FloatingArrow,
   arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
@@ -46,8 +50,11 @@ 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;
   arrowProps?: IPopupArrowProps;
@@ -70,6 +77,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** Должна ли минимальная ширина попапа быть равна ширине триггера
    * @default false */
   isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -91,6 +103,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -99,15 +116,14 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const [isOpen, setIsOpen] = useState(false);
+  const isActive = isOpen && !isDisabled;
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
-  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
+  const handleToggle = (next: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive, event);
-      setIsOpen(isActive);
-    }
+    onToggle?.(next, event);
+    setIsOpen(next);
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -115,7 +131,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   };
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
+    open: isActive,
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
@@ -130,22 +146,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,
@@ -157,7 +178,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : undefined,
     triggerProps: {
-      isActive: isOpen,
+      isActive,
       isDisabled,
       ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
     },
@@ -170,7 +191,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
           className={clsx(classes.trigger, {
             [classes.clickable]: eventType === 'click',
             [classes.disabled]: isDisabled,
-            [classes.active]: isOpen,
+            [classes.active]: isActive,
           })}
           {...referenceProps}
           {...addDataAttributes(data, testId)}
@@ -189,7 +210,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             style={floatingStyles}
             className={classes.popup}
             {...getFloatingProps()}
-            {...addDataAttributes(popupData)}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
               {shouldShowArrow && (

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

@@ -1,17 +1,16 @@
 import { FC } from 'react';
 import { getTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
 import { IWithTooltipStyles, withPopupStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
-      IWithPopupProps,
-      'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped' | 'tweakStyles'
-    >,
-    ICommonProps<IWithTooltipStyles> {
+    IReplaceTweakStylesProps<IWithPopupProps, IWithTooltipStyles>,
+    'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped'
+  > {
   children: IWithPopupProps['trigger'];
   /** @default 'hover' */
   eventType?: IWithPopupProps['eventType'];
@@ -22,6 +21,8 @@ export interface IWithTooltipProps
   tooltipView?: ITooltipProps['view'];
   /** @default 'info' */
   tooltipType?: ITooltipProps['type'];
+  /** @default 'undefined' */
+  tooltipSize?: ITooltipProps['size'];
 }
 
 export const WithTooltip: FC<IWithTooltipProps> = ({
@@ -31,6 +32,7 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
   tooltipText,
   tooltipView = 'tooltip',
   tooltipType = 'info',
+  tooltipSize,
   isDisabled = false,
   popupData,
   tweakStyles,
@@ -64,6 +66,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);