@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

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

@@ -1,9 +1,11 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Button } from '../Button';
 import { IListItem, List } from '../List';
 import { Tooltip } from '../Tooltip';
-import { WithPopup } from './WithPopup';
+import { IWithPopupProps, WithPopup } from './WithPopup';
 
 const positions = [
   undefined,
@@ -21,15 +23,6 @@ const positions = [
   'left-end',
 ];
 
-export default {
-  title: 'Data Display/WithPopup',
-  component: WithPopup,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
 const items: IListItem[] = [
   {
     item: 'Copy',
@@ -45,7 +38,7 @@ const items: IListItem[] = [
   },
 ];
 
-const Template: ComponentStory<typeof WithPopup> = (args) => (
+const Story: FC<IWithPopupProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -83,19 +76,27 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: true,
-  isDisabled: false,
-  shouldRenderInBody: true,
-  shouldHideOnScroll: false,
-  shouldStopPropagation: true,
-  shouldShowArrow: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithPopup',
+  component: Story,
+  args: {
+    canBeFlipped: true,
+    isDisabled: false,
+    shouldRenderInBody: true,
+    shouldHideOnScroll: false,
+    shouldStopPropagation: true,
+    shouldShowArrow: false,
+  },
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['trigger', 'middlewares', 'children', 'eventType']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

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/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/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/misc.ts

@@ -1,4 +1,3 @@
-import hexToRgba from 'hex-to-rgba';
 import {
   isNotEmpty,
   isString,
@@ -6,7 +5,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 +21,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 +40,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 +157,6 @@ export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =
         : [],
     ),
   );
+
+export const excludeStorybookParams = (params: string[]): RegExp =>
+  new RegExp(`^(on.*|${['tweakStyles', 'data', ...params].join('|')})$`);

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/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,7 +1,10 @@
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-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';

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-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-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-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]);
 }