@pushwoosh/dumb-components 4.7.0 → 4.7.2

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -66,7 +66,12 @@ export const CalendarDropdown = props => {
     setIsOpen(true);
   };
   const {
-    refs,
+    refs: {
+      reference,
+      floating,
+      setReference,
+      setFloating
+    },
     floatingStyles
   } = useFloating({
     open: isOpen,
@@ -84,7 +89,7 @@ export const CalendarDropdown = props => {
     isOpen,
     onClose: closePopover
   });
-  useOnClickOutside([refs.reference, refs.floating], () => {
+  useOnClickOutside([reference, floating], () => {
     if (isOpen) closePopover();
   });
   const onChangeHandler = val => {
@@ -106,7 +111,7 @@ export const CalendarDropdown = props => {
   return _jsxs(Horizontal, {
     "$justifyContent": "start",
     children: [_jsx(Button, {
-      boxRef: refs.setReference,
+      boxRef: setReference,
       type: "button",
       view: buttonView,
       size: buttonSize,
@@ -119,7 +124,7 @@ export const CalendarDropdown = props => {
       isOpen: isOpen,
       children: buttonTextCustom ?? buttonText
     }), isOpen && createPortal(_jsx(PopoverContent, {
-      ref: refs.setFloating,
+      ref: setFloating,
       style: {
         ...floatingStyles,
         zIndex

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useState } from 'react';
 import { getDisabledRanges } from './getDisabledRanges';
 import { CalendarMonthSlider } from '../../../CalendarMonthSlider/CalendarMonthSlider';
 import { compareStructs } from '../../../helpers';
@@ -18,17 +18,16 @@ export const CalendarRangePicker = ({
   firstDayOfWeek,
   initialVisibleMonth
 }) => {
-  const startMonthRef = useRef(undefined);
-  if (!startMonthRef.current) {
+  const [startMonth] = useState(() => {
     const d = new Date();
-    startMonthRef.current = initialVisibleMonth ?? value[0] ?? {
+    return initialVisibleMonth ?? value[0] ?? {
       year: d.getFullYear(),
       month: d.getMonth() + 1,
       day: d.getDate()
     };
-  }
+  });
   return _jsx(CalendarMonthSlider, {
-    startMonth: startMonthRef.current,
+    startMonth: startMonth,
     visibleCount: visibleCount,
     monthWidth: monthWidth,
     gap: gap,

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/hooks/useLayer.js

@@ -100,9 +100,11 @@ export function useLayer({
 }) {
   const id = useId();
   const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
   const zIndexRef = useRef(zIndex);
-  zIndexRef.current = zIndex;
+  useLayoutEffect(() => {
+    onCloseRef.current = onClose;
+    zIndexRef.current = zIndex;
+  });
   useLayoutEffect(() => {
     if (!isOpen) {
       return undefined;

package/hooks/useThemeName.js

@@ -11,7 +11,7 @@ function readThemeName(element) {
  * @param ref - element inside the theme scope, so a light island wins over the document theme
  * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
 export function useThemeName(ref, isEnabled = true) {
-  const [themeName, setThemeName] = useState(() => readThemeName(ref?.current ?? null));
+  const [themeName, setThemeName] = useState(() => readThemeName(null));
   useLayoutEffect(() => {
     if (!isEnabled) {
       return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -37,7 +37,7 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^3.0.0",
-    "@pushwoosh/kit-helpers": "^4.16.0",
+    "@pushwoosh/kit-helpers": "^4.16.1",
     "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@tippyjs/react": "^4.2.6",

package/shared/dropdownField/useAsyncItems.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { DEFAULT_DEBOUNCE_MS } from './constants';
 import { useDebouncedValue } from './useDebouncedValue';
 /**
@@ -20,7 +20,9 @@ export function useAsyncItems({
   });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
-  loadItemsRef.current = loadItems;
+  useLayoutEffect(() => {
+    loadItemsRef.current = loadItems;
+  });
   const sessionRef = useRef(0);
   const pageRef = useRef(0);
   const queryRef = useRef('');

package/shared/dropdownField/useFieldOpenEffects.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useEffectEvent, useRef } from 'react';
 /**
  * Side effects tied to a Combobox field's open state: optional autofocus on mount
  * and firing `onClose` when the field closes.
@@ -11,11 +11,10 @@ export function useFieldOpenEffects({
   disabled,
   inputRef
 }) {
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
+  const onCloseEvent = useEffectEvent(() => onClose?.());
   const wasOpenRef = useRef(isOpen);
   useEffect(() => {
-    if (wasOpenRef.current && !isOpen) onCloseRef.current?.();
+    if (wasOpenRef.current && !isOpen) onCloseEvent();
     wasOpenRef.current = isOpen;
   }, [isOpen]);
   const didAutoFocusRef = useRef(false);