добавлен vanilla popper, удален react-popper из проекта

package.json

@@ -40,7 +40,6 @@
     "re-resizable": "^6.9.0",
     "react": "^17.*",
     "react-dom": "^17.*",
-    "react-popper": "^2.1.0",
     "react-router-dom": "^5.*",
     "react-transition-group": "^4.4.1",
     "react-use": "^17.2.4",

src/css/common.scss

@@ -2,3 +2,4 @@
   box-sizing: border-box;
   line-height: 0;
 }
+

src/primitives/Popper/Manager/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export const ManagerReferenceNodeContext = React.createContext<HTMLElement>(null!);
+export const ManagerReferenceNodeSetterContext = React.createContext<(elem: HTMLElement) => void>(null!);
+
+export function Manager({ children }: React.PropsWithChildren<{}>) {
+  const [referenceNode, setReferenceNode] = React.useState<any>(null);
+
+  const hasUnmounted = React.useRef(false);
+  React.useEffect(() => {
+    return () => {
+      hasUnmounted.current = true;
+    };
+  }, []);
+
+  const handleSetReferenceNode = React.useCallback((node) => {
+    if (!hasUnmounted.current) {
+      setReferenceNode(node);
+    }
+  }, []);
+
+  return (
+    <ManagerReferenceNodeContext.Provider value={referenceNode}>
+      <ManagerReferenceNodeSetterContext.Provider value={handleSetReferenceNode}>
+        {children}
+      </ManagerReferenceNodeSetterContext.Provider>
+    </ManagerReferenceNodeContext.Provider>
+  );
+}

src/primitives/Popper/Popper/index.tsx

@@ -0,0 +1,100 @@
+import React, { Ref } from "react";
+import { provideRef } from "@worksolutions/react-utils";
+import { Modifier, Options, Placement, PositioningStrategy, State } from "@popperjs/core/lib";
+
+import { ManagerReferenceNodeContext } from "../Manager";
+
+import { unwrapArray } from "../utils";
+import { useVanillaPopper } from "../useVanillaPopper";
+
+type ReferenceElement = HTMLElement;
+
+export interface PopperArrowProps {
+  ref: React.Ref<any>;
+  style: React.CSSProperties;
+}
+
+export type PopperChildrenProps = {
+  ref: Ref<any>;
+  style: CSSStyleDeclaration;
+  placement: Placement;
+  isReferenceHidden?: boolean;
+  hasPopperEscaped?: boolean;
+  update: () => Promise<null | State>;
+  forceUpdate: () => void;
+  arrowProps: PopperArrowProps;
+};
+
+type Modifiers = Array<Partial<Modifier<any, any>>>;
+export type PopperChildren = (popperChildrenProps: PopperChildrenProps) => React.ReactNode;
+
+export type PopperProps = {
+  children: PopperChildren;
+  innerRef?: Ref<any>;
+  modifiers?: Modifiers;
+  placement?: Placement;
+  strategy?: PositioningStrategy;
+  referenceElement?: ReferenceElement;
+  onFirstUpdate?: (arg0: Partial<State>) => void;
+};
+
+const NOOP = () => void 0;
+const NOOP_PROMISE = () => Promise.resolve(null);
+const EMPTY_MODIFIERS: Modifiers = [];
+
+export function Popper({
+  placement = "bottom",
+  strategy = "absolute",
+  modifiers = EMPTY_MODIFIERS,
+  referenceElement,
+  onFirstUpdate,
+  innerRef,
+  children,
+}: PopperProps) {
+  const referenceNode = React.useContext(ManagerReferenceNodeContext);
+
+  const [popperElement, setPopperElement] = React.useState(null);
+  const [arrowElement, setArrowElement] = React.useState(null);
+
+  React.useEffect(() => {
+    provideRef(innerRef)(popperElement!);
+  }, [innerRef, popperElement]);
+
+  const options: Options = React.useMemo(
+    () => ({
+      placement,
+      strategy,
+      onFirstUpdate,
+      modifiers: [
+        ...modifiers,
+        {
+          name: "arrow",
+          enabled: arrowElement != null,
+          options: { element: arrowElement },
+        },
+      ],
+    }),
+    [placement, strategy, onFirstUpdate, modifiers, arrowElement],
+  );
+
+  const { state, forceUpdate, update } = useVanillaPopper(referenceElement || referenceNode, popperElement, options);
+
+  const childrenProps = React.useMemo(
+    () => ({
+      ref: setPopperElement,
+      style: state?.styles?.popper,
+      placement: state ? state.placement : placement,
+      hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
+      isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
+      arrowProps: {
+        style: state?.styles?.arrow,
+        ref: setArrowElement,
+      },
+      forceUpdate: forceUpdate || NOOP,
+      update: update || NOOP_PROMISE,
+    }),
+    [setPopperElement, setArrowElement, placement, state, update, forceUpdate],
+  );
+
+  return unwrapArray(children)(childrenProps);
+}

src/primitives/Popper/Reference/index.ts

@@ -0,0 +1,32 @@
+import React, { Ref } from "react";
+import { provideRef } from "@worksolutions/react-utils";
+
+import { unwrapArray } from "../utils";
+import { ManagerReferenceNodeSetterContext } from "../Manager";
+
+export type ReferenceChildrenProps = { ref: Ref<any> };
+export type ReferenceProps = {
+  children: (ReferenceChildrenProps: ReferenceChildrenProps) => React.ReactNode;
+  innerRef?: Ref<any>;
+};
+
+export function Reference({ children, innerRef }: ReferenceProps) {
+  const setReferenceNode = React.useContext(ManagerReferenceNodeSetterContext);
+
+  const refHandler = React.useCallback(
+    (node?: HTMLElement) => {
+      if (!node) return;
+      provideRef(innerRef)(node);
+      setReferenceNode(node);
+    },
+    [innerRef, setReferenceNode],
+  );
+
+  React.useEffect(() => () => provideRef(innerRef)(null!), []);
+
+  React.useEffect(() => {
+    console.warn("`Reference` should not be used outside of a `Manager` component.");
+  }, [setReferenceNode]);
+
+  return unwrapArray(children)({ ref: refHandler });
+}

src/primitives/Popper/useVanillaPopper.ts

@@ -0,0 +1,58 @@
+import { useLayoutEffect, useMemo, useState } from "react";
+import {
+  createPopper,
+  Instance as PopperInstance,
+  Modifier,
+  Options as PopperOptions,
+  Placement,
+  PositioningStrategy,
+  State as PopperState,
+} from "@popperjs/core";
+
+type Options = { createPopper?: typeof createPopper } & {
+  placement?: Placement;
+  modifiers?: Partial<Modifier<any, any>>[];
+  strategy?: PositioningStrategy;
+  onFirstUpdate?: ((state: Partial<PopperState>) => void) | undefined;
+};
+
+const EMPTY_MODIFIERS: PopperOptions["modifiers"] = [];
+
+type UsePopperResult = {
+  state: PopperState | null;
+  update: PopperInstance["update"] | null;
+  forceUpdate: PopperInstance["forceUpdate"] | null;
+};
+
+export function useVanillaPopper(
+  reference: HTMLElement | null,
+  tooltip: HTMLElement | null,
+  options: Options,
+): UsePopperResult {
+  const [popperInstance, setPopperInstance] = useState<PopperInstance>();
+
+  const popperOptions = useMemo(() => {
+    return {
+      onFirstUpdate: options.onFirstUpdate,
+      placement: options.placement || "bottom",
+      strategy: options.strategy || "absolute",
+      modifiers: options.modifiers || EMPTY_MODIFIERS,
+    };
+  }, [options.modifiers, options.placement, options.strategy, options.onFirstUpdate]);
+
+  useLayoutEffect(() => {
+    if (!reference) return;
+    if (!tooltip) return;
+
+    const popper = createPopper(reference, tooltip, popperOptions);
+    setPopperInstance(popper);
+
+    return () => popper.destroy();
+  }, [reference, tooltip, popperOptions]);
+
+  return {
+    forceUpdate: popperInstance ? popperInstance.forceUpdate : null,
+    update: popperInstance ? popperInstance.update : null,
+    state: popperInstance ? popperInstance.state : null,
+  };
+}

src/primitives/Popper/utils.ts

@@ -0,0 +1 @@
+export const unwrapArray = (arg: any): any => (Array.isArray(arg) ? arg[0] : arg);

src/primitives/PopupManager/PopperElement/Arrow.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
-import { PopperArrowProps } from "react-popper";
 import { Placement } from "@popperjs/core/lib/enums";
 
+import { PopperArrowProps } from "primitives/Popper/Popper";
 import Wrapper from "../../Wrapper";
 
 import { bottom, boxShadow, child, left, right, top, transform, zIndex } from "../../../styles";
@@ -40,8 +40,6 @@ interface PopupArrowInterface {
 }
 
 function Arrow({ arrowProps, placement }: PopupArrowInterface) {
-  return null;
-
   const arrowPopperStyles = useCallback(() => reactStylesToStylesComponent(arrowProps.style), [arrowProps.style]);
   const arrowPositionStyles = useMemo(() => getArrowPositionStyles(placement), [placement]);
   const arrowStyles = useMemo(() => getArrowStyles(placement), [placement]);

src/primitives/PopupManager/PopperElement/PopperElementChildrenWrapper.tsx

@@ -1,14 +1,15 @@
 import React, { Ref, useEffect } from "react";
 import { Placement } from "@popperjs/core/lib/enums";
 import { useEffectSkipFirst } from "@worksolutions/react-utils";
-import { PopperArrowProps } from "react-popper";
+
+import { PopperArrowProps } from "primitives/Popper/Popper";
 
 import Wrapper from "../../Wrapper";
 import Arrow from "./Arrow";
 
 interface PopperChildrenProps {
   styles?: any;
-  style: React.CSSProperties;
+  style: CSSStyleDeclaration;
   placement: Placement;
   children: React.ReactNode;
   hasArrow?: boolean;
@@ -23,6 +24,7 @@ function PopperElementChildrenWrapper(
 ) {
   useEffectSkipFirst(update, [update, hasArrow]);
 
+  useEffect(update, []);
   useEffect(() => {
     if (!triggerElement) return () => {};
 

src/primitives/PopupManager/PopperElement/index.tsx

@@ -2,8 +2,10 @@ import React, { Ref, useMemo } from "react";
 import { Placement } from "@popperjs/core/lib/enums";
 import { PositioningStrategy } from "@popperjs/core";
 import popperMaxSizeModifier from "popper-max-size-modifier";
+import { Modifier } from "@popperjs/core/lib";
+
+import { Popper } from "primitives/Popper/Popper";
 
-import { Modifier, Popper as ReactPopper } from "react-popper";
 import { zIndex_popup } from "../../../constants/zIndexes";
 import PopperElementChildrenWrapper from "./PopperElementChildrenWrapper";
 import { popupArrowSize } from "./Arrow";
@@ -12,8 +14,12 @@ const commonPopperStyles = [zIndex_popup];
 
 const modifierArrowPadding = 12;
 
-function getModifiers(offset?: number): Modifier<string>[] {
+function getModifiers(offset?: number): Partial<Modifier<any, any>>[] {
   return [
+    {
+      name: "flip",
+      enabled: true,
+    },
     {
       name: "arrow",
       options: {
@@ -70,22 +76,24 @@ function PopperElement(
   const popperModifiers = useMemo(() => getModifiers(offset), [offset]);
 
   return (
-    <ReactPopper placement={primaryPlacement} modifiers={popperModifiers} strategy={strategy} innerRef={ref}>
-      {({ ref, style, placement, arrowProps, update }) => (
-        <PopperElementChildrenWrapper
-          ref={ref}
-          style={style}
-          styles={[commonPopperStyles, styles]}
-          placement={placement}
-          arrowProps={arrowProps}
-          hasArrow={hasArrow}
-          update={update}
-          triggerElement={triggerElement}
-        >
-          {children}
-        </PopperElementChildrenWrapper>
-      )}
-    </ReactPopper>
+    <Popper placement={primaryPlacement} modifiers={popperModifiers} strategy={strategy} innerRef={ref}>
+      {({ ref, style, placement, arrowProps, update }) => {
+        return (
+          <PopperElementChildrenWrapper
+            ref={ref}
+            style={style}
+            styles={[commonPopperStyles, styles]}
+            placement={placement}
+            arrowProps={arrowProps}
+            hasArrow={hasArrow}
+            update={update}
+            triggerElement={triggerElement}
+          >
+            {children}
+          </PopperElementChildrenWrapper>
+        );
+      }}
+    </Popper>
   );
 }
 

src/primitives/PopupManager/PopupManagers/PopupManagerForClick.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Manager as ReactPopperManager, Reference as ReactPopperReference } from "react-popper";
 import { provideRef } from "@worksolutions/react-utils";
 import { observer } from "mobx-react-lite";
 
+import { Reference } from "primitives/Popper/Reference";
+import { Manager } from "primitives/Popper/Manager";
+
 import VisibilityManager, { VisibilityManagerContextInterface } from "../../VisibilityManager";
 import { SetVisibilityContextAndTriggerRef } from "./types";
 
@@ -27,14 +29,14 @@ function PopupManagerForClick({
   const Element = React.useCallback(
     (context: VisibilityManagerContextInterface) => (
       <>
-        <ReactPopperReference>
+        <Reference>
           {({ ref: reactPopperReferenceRef }) => (
             <TriggerElement
               {...context}
               initRef={provideRef(context.initRef, reactPopperReferenceRef, setVisibilityContextAndTriggerRef(context))}
             />
           )}
-        </ReactPopperReference>
+        </Reference>
       </>
     ),
     [TriggerElement, setVisibilityContextAndTriggerRef],
@@ -43,12 +45,12 @@ function PopupManagerForClick({
   const ignoreElements = React.useMemo(() => [popupElementHtmlNode], [popupElementHtmlNode]);
 
   return (
-    <ReactPopperManager>
+    <Manager>
       <VisibilityManager outsideClickIgnoreElements={ignoreElements} closeOnClickOutside={closeOnClickOutside}>
         {Element}
       </VisibilityManager>
       {popupElementNode && React.cloneElement(popupElementNode as any, { ref: setPopupElementHtmlNode })}
-    </ReactPopperManager>
+    </Manager>
   );
 }