@true-engineering/true-react-common-ui-kit 4.0.0-alpha74 → 4.0.0-alpha76

package/src/components/WithPopup/WithPopup.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
   applyAction,
@@ -28,6 +28,8 @@ import {
   UseFocusProps,
   UseDismissProps,
   UseTransitionStatusProps,
+  FlipOptions,
+  MiddlewareState,
 } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
@@ -45,6 +47,7 @@ import { useStyles, IWithPopupStyles } from './WithPopup.styles';
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   trigger: IRenderNode<IWithPopupTriggerProps>;
   children: IRenderNode<IWithPopupChildrenProps>;
+  state?: [boolean, Dispatch<SetStateAction<boolean>>];
   middlewares?: Middleware[];
   /** @default eventType === 'click' ? 'bottom-end' : 'top' */
   placement?: Placement;
@@ -77,6 +80,7 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** Должна ли минимальная ширина попапа быть равна ширине триггера
    * @default false */
   isMinWidthSameAsTrigger?: boolean;
+  flipOptions?: FlipOptions | ((state: MiddlewareState) => FlipOptions);
   hoverOptions?: UseHoverProps;
   clickOptions?: UseClickProps;
   focusOptions?: UseFocusProps;
@@ -88,6 +92,7 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
 export const WithPopup: FC<IWithPopupProps> = ({
   trigger,
   children,
+  state,
   middlewares = [],
   eventType = 'click',
   placement = eventType === 'click' ? 'bottom-end' : 'top',
@@ -103,6 +108,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  flipOptions,
   hoverOptions,
   clickOptions,
   focusOptions,
@@ -115,15 +121,18 @@ export const WithPopup: FC<IWithPopupProps> = ({
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const [isOpen, setIsOpen] = useState(false);
+  const innerState = useState(false);
+  const [isOpen, setIsOpen] = state ?? innerState;
   const isActive = isOpen && !isDisabled;
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
   const handleToggle = (next: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    onToggle?.(next, event);
-    setIsOpen(next);
+    if (isOpen !== next) {
+      onToggle?.(next, event);
+      setIsOpen(next);
+    }
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -134,7 +143,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
     open: isActive,
     middleware: [
       offset(popupOffset),
-      canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      canBeFlipped &&
+        flip((middlewareState) => ({
+          fallbackAxisSideDirection: 'start',
+          ...applyAction(flipOptions, middlewareState),
+        })),
       isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
       shouldShowArrow && arrow({ element: arrowRef }),

package/src/helpers/misc.ts

@@ -27,20 +27,6 @@ export const getParentNode = (element: Element | ShadowRoot | Document): Element
     ? (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
-  }
-
-  const parentNode = getParentNode(element);
-
-  if (parentNode === element) {
-    return false; // Reached the top-level HTML element or Shadow DOM host
-  }
-
-  return hasExactParent(parentNode, parent);
-};
-
 export const getStyleComputedProperty = (element: Element): Partial<CSSStyleDeclaration> =>
   element.nodeType !== 1 ? {} : getComputedStyle(element, null);