@pushwoosh/dumb-components 4.7.1 → 4.7.2

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -49,7 +49,12 @@ export const DropdownMenu = ({
     zIndex: menuZIndex
   });
   const {
-    refs,
+    refs: {
+      reference,
+      floating,
+      setReference,
+      setFloating
+    },
     floatingStyles
   } = useFloating({
     open: isOpen,
@@ -70,7 +75,7 @@ export const DropdownMenu = ({
   useEffect(() => {
     if (isOpen) {
       const handleClickListener = e => {
-        if (!refs.floating.current?.contains(e.target) && !refs.reference.current?.contains(e.target)) {
+        if (!floating.current?.contains(e.target) && !reference.current?.contains(e.target)) {
           handleClose();
         }
       };
@@ -82,17 +87,17 @@ export const DropdownMenu = ({
         document.removeEventListener('click', handleClickListener);
       };
     }
-  }, [isOpen, refs.floating, refs.reference, handleClose]);
+  }, [isOpen, floating, reference, handleClose]);
   useEffect(() => {
-    if (isOpen && isScrollable && refs.floating.current) {
-      const activeElement = refs.floating.current.querySelector('[data-active="true"]');
+    if (isOpen && isScrollable && floating.current) {
+      const activeElement = floating.current.querySelector('[data-active="true"]');
       if (activeElement) {
         activeElement.scrollIntoView({
           block: 'nearest'
         });
       }
     }
-  }, [isOpen, isScrollable, refs.floating]);
+  }, [isOpen, isScrollable, floating]);
   return _jsxs(DropdownContext.Provider, {
     value: setIsOpen,
     children: [renderHandler({
@@ -103,12 +108,12 @@ export const DropdownMenu = ({
           setIsOpen(true);
         }
       },
-      ref: refs.setReference,
+      ref: setReference,
       isOpen
     }), isOpen && createPortal(_jsx(DropdownZIndexContext.Provider, {
       value: resolvedZIndex,
       children: _jsx(Place, {
-        ref: refs.setFloating,
+        ref: setFloating,
         style: floatingStyles,
         "$color": color,
         "$width": width ?? undefined,

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -39,7 +39,10 @@ export const DropdownMenuSubmenu = ({
   const openedByClick = useRef(false);
   const [availableHeight, setAvailableHeight] = useState();
   const {
-    refs,
+    refs: {
+      setReference,
+      setFloating
+    },
     floatingStyles
   } = useFloating({
     strategy: 'fixed',
@@ -98,7 +101,7 @@ export const DropdownMenuSubmenu = ({
     children: _jsxs(DropdownZIndexContext.Provider, {
       value: submenuZIndex,
       children: [_jsx(DropdownMenuItemStyled, {
-        ref: refs.setReference,
+        ref: setReference,
         type: "button",
         "$active": isOpen,
         "$danger": isDanger,
@@ -122,7 +125,7 @@ export const DropdownMenuSubmenu = ({
       }), isOpen && createPortal(_jsx(SubmenuRegistryContext.Provider, {
         value: submenus,
         children: _jsx(Place, {
-          ref: refs.setFloating,
+          ref: setFloating,
           style: {
             ...floatingStyles,
             maxHeight,

package/RichMessageEditor/RichMessageEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
 import { isEqual } from 'es-toolkit';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Transforms } from 'slate';
 import { Collapse, elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { FieldBox } from '../FieldBox';
@@ -36,9 +36,13 @@ export const RichMessageEditor = ({
 }) => {
   const [showDrop, setShowDrop] = useState();
   const [isFocused, setIsFocused] = useState(false);
-  const arrowRef = useRef(null);
+  const [arrowElement, setArrowElement] = useState(null);
   const {
-    refs,
+    refs: {
+      reference,
+      setReference,
+      setFloating
+    },
     floatingStyles,
     update,
     middlewareData,
@@ -48,7 +52,7 @@ export const RichMessageEditor = ({
     middleware: [offset(8), autoPlacement({
       allowedPlacements: ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']
     }), arrow({
-      element: arrowRef
+      element: arrowElement
     })]
   });
   const onSelectionChange = selection => {
@@ -91,11 +95,11 @@ export const RichMessageEditor = ({
       return;
     }
     return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
-      if (refs.reference.current instanceof HTMLElement && !refs.reference.current.contains(event.target)) {
+      if (reference.current instanceof HTMLElement && !reference.current.contains(event.target)) {
         clickAwayHandler();
       }
     });
-  }, [clickAwayHandler, isFocused, refs.reference]);
+  }, [clickAwayHandler, isFocused, reference]);
   return _jsx(SlateEditor, {
     initialValue: initialValue,
     onChange: onChange,
@@ -104,7 +108,7 @@ export const RichMessageEditor = ({
       editor
     }) => _jsxs(FieldBox, {
       title: title,
-      boxRef: refs.setReference,
+      boxRef: setReference,
       error: error,
       actions: _jsx(Collapse, {
         expanded: isFocused,
@@ -141,7 +145,7 @@ export const RichMessageEditor = ({
         }
       }), showDrop && _jsxs(DropArea, {
         style: floatingStyles,
-        ref: refs.setFloating,
+        ref: setFloating,
         children: [showDrop.type === 'personalization' && _jsx(DropContent, {
           children: renderDynamicContent?.({
             dc: showDrop.path ? getDcByPath(editor.children, showDrop.path)?.dc : undefined,
@@ -163,7 +167,7 @@ export const RichMessageEditor = ({
           onEmojiSelect: s => editor.insertText(s)
         }), _jsx(Arrow, {
           "$direction": placementToDirection(placement),
-          ref: arrowRef,
+          ref: setArrowElement,
           style: {
             left: middlewareData.arrow?.x,
             top: middlewareData.arrow?.y

package/Tooltip/Tooltip.js

@@ -44,7 +44,8 @@ export function Tooltip({
     isOpen
   });
   const {
-    setReference
+    setReference,
+    setFloating
   } = refs;
   const originalRef = isValidElement(children) ? children.ref : undefined;
   const setChildRef = useCallback(node => {
@@ -86,7 +87,7 @@ export function Tooltip({
   }) : children ?? null;
   return _jsxs(_Fragment, {
     children: [anchor, isOpen && referenceEl && createPortal(_jsxs(TooltipBox, {
-      ref: refs.setFloating,
+      ref: setFloating,
       style: {
         ...floatingStyles,
         zIndex

package/Tooltip/useTooltipPosition.d.ts

@@ -21,7 +21,7 @@ export declare function useTooltipPosition({ position, offset: offsetProp, arrow
     };
     floatingStyles: CSSProperties;
     placement: import("@floating-ui/react-dom").Placement;
-    arrowRef: import("react").RefObject<HTMLDivElement | null>;
+    arrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
     arrowStyles: CSSProperties;
 };
 export {};

package/Tooltip/useTooltipPosition.js

@@ -1,5 +1,5 @@
 import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
-import { useRef } from 'react';
+import { useState } from 'react';
 import { resolveArrowPadding } from './helpers';
 import { TooltipPositionToFloatingPlacementMap, TooltipPositionToOffsetMap } from './maps';
 const ArrowStaticSideMap = {
@@ -20,7 +20,7 @@ export function useTooltipPosition({
   arrowOffset,
   isOpen
 }) {
-  const arrowRef = useRef(null);
+  const [arrowElement, setArrowElement] = useState(null);
   const [skidding, distance] = offsetProp ?? TooltipPositionToOffsetMap[position];
   const arrowPadding = resolveArrowPadding(arrowOffset);
   const {
@@ -38,7 +38,7 @@ export function useTooltipPosition({
     }), flip(), shift({
       padding: 8
     }), arrow({
-      element: arrowRef,
+      element: arrowElement,
       padding: arrowPadding
     })],
     whileElementsMounted: autoUpdate
@@ -57,7 +57,7 @@ export function useTooltipPosition({
     refs,
     floatingStyles,
     placement,
-    arrowRef,
+    arrowRef: setArrowElement,
     arrowStyles
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",