@pushwoosh/dumb-components 4.3.3 → 4.3.4

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
@@ -45,12 +45,18 @@ export const CalendarDropdown = props => {
   const [value, setValue] = useState(props.value ?? (isRangePicker ? [] : undefined));
   const initialTimezone = calendarProps.timezone || 'UTC';
   const [timezone, setTimezone] = useState(initialTimezone);
-  useEffect(() => {
+  const valueDeps = [props.value, isRangePicker];
+  const [prevValueDeps, setPrevValueDeps] = useState(null);
+  if (prevValueDeps === null || valueDeps.some((dep, index) => dep !== prevValueDeps[index])) {
+    setPrevValueDeps(valueDeps);
     setValue(props.value ?? (isRangePicker ? [] : undefined));
-  }, [props.value, isRangePicker]);
-  useEffect(() => {
+  }
+  const timezoneDeps = [calendarProps.timezone];
+  const [prevTimezoneDeps, setPrevTimezoneDeps] = useState(null);
+  if (prevTimezoneDeps === null || timezoneDeps.some((dep, index) => dep !== prevTimezoneDeps[index])) {
+    setPrevTimezoneDeps(timezoneDeps);
     setTimezone(calendarProps.timezone || 'UTC');
-  }, [calendarProps.timezone]);
+  }
   const closePopover = () => {
     setIsOpen(false);
     setValue(props.value ?? (isRangePicker ? [] : undefined));

package/ExternalImagePreview/ExternalImagePreview.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { RootBox, ImgPreview, PlaceholderWrapper } from './styles';
@@ -21,12 +21,15 @@ export function ExternalImagePreview(props) {
   } = props;
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
-  useEffect(() => {
+  const srcDeps = [src];
+  const [prevSrcDeps, setPrevSrcDeps] = useState(null);
+  if (prevSrcDeps === null || srcDeps.some((dep, index) => dep !== prevSrcDeps[index])) {
+    setPrevSrcDeps(srcDeps);
     if (src) {
       setIsLoading(true);
       setIsError(false);
     }
-  }, [src]);
+  }
   const handleOnError = error => {
     setIsLoading(false);
     setIsError(true);

package/NumberPicker/NumberPicker.js

@@ -36,9 +36,12 @@ export function NumberPicker({
       onChange(newValue);
     }
   });
-  useEffect(() => {
+  const valueDeps = [value];
+  const [prevValueDeps, setPrevValueDeps] = useState(null);
+  if (prevValueDeps === null || valueDeps.some((dep, index) => dep !== prevValueDeps[index])) {
+    setPrevValueDeps(valueDeps);
     setLocalValue(value !== undefined ? value.toString() : '');
-  }, [value]);
+  }
   useEffect(() => {
     if (!autoDiff) {
       return;

package/ReCaptcha/hooks.js

@@ -11,7 +11,6 @@ export function useRecaptcha() {
   const [widgetID, setWidgetID] = useState(null);
   const [isRecaptchaReady, setRecaptchaReady] = useState(!!(isRecaptchaLoaded && widgetID));
   const [recaptchaErrorCode, setRecaptchaErrorCode] = useState(''); // RIEXXX - ReCaptcha Internal Error
-  const [intervalID, setIntervalID] = useState(0);
   // Load external script effect, fires once
   useEffect(() => {
     asyncScriptLoad(RECAPTCHA_SCRIPT_URL).catch(() => setRecaptchaErrorCode('RIE001'));
@@ -21,9 +20,9 @@ export function useRecaptcha() {
     const newInterval = window.setInterval(() => {
       if (window?.grecaptcha?.render) {
         setRecaptchaLoaded(true);
+        clearInterval(newInterval);
       }
     }, 500);
-    setIntervalID(newInterval);
     return () => {
       clearInterval(newInterval);
     };
@@ -31,7 +30,6 @@ export function useRecaptcha() {
   // Render recaptcha widget when script loaded, stop interval
   useEffect(() => {
     if (isRecaptchaLoaded && widgetID === null) {
-      clearInterval(intervalID);
       try {
         const widget = window.grecaptcha.render(RECAPTCHA_CONTAINER_ID, {
           sitekey: RECAPTCHA_KEY,
@@ -46,7 +44,7 @@ export function useRecaptcha() {
         setRecaptchaErrorCode('RIE002');
       }
     }
-  }, [isRecaptchaLoaded, widgetID, intervalID, promiseRef]);
+  }, [isRecaptchaLoaded, widgetID, promiseRef]);
   // async function to get recaptcha token, resolves by resolveAction callback
   const getRecaptchaToken = useCallback(async () => new Promise((resolve, reject) => {
     try {

package/SandboxedHtmlFrame/SandboxedHtmlFrame.js

@@ -27,9 +27,12 @@ export function SandboxedHtmlFrame(props) {
   const onReady = mode === 'inspectable' ? props.onReady : undefined;
   const $ref = useRef(null);
   const [isReady, setIsReady] = useState(false);
-  useEffect(() => {
+  const htmlDeps = [html];
+  const [prevHtmlDeps, setPrevHtmlDeps] = useState(null);
+  if (prevHtmlDeps === null || htmlDeps.some((dep, index) => dep !== prevHtmlDeps[index])) {
+    setPrevHtmlDeps(htmlDeps);
     setIsReady(false);
-  }, [html]);
+  }
   const handleLoad = useCallback(() => {
     setIsReady(true);
   }, []);

package/Tooltip/Tooltip.js

@@ -52,11 +52,14 @@ export function Tooltip({
     assignRef(originalRef, node);
   }, [originalRef]);
   const externalReferenceEl = reference?.current ?? null;
-  useEffect(() => {
+  const referenceDeps = [reference, externalReferenceEl];
+  const [prevReferenceDeps, setPrevReferenceDeps] = useState(null);
+  if (prevReferenceDeps === null || referenceDeps.some((dep, index) => dep !== prevReferenceDeps[index])) {
+    setPrevReferenceDeps(referenceDeps);
     if (reference) {
       setReferenceEl(externalReferenceEl);
     }
-  }, [reference, externalReferenceEl]);
+  }
   useEffect(() => {
     setReference(referenceEl);
   }, [referenceEl, setReference]);

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { ImageIcon } from '@pushwoosh/kit-icons';
@@ -26,7 +26,12 @@ export function WhatsAppAttachment(props) {
   const [hasFailed, setHasFailed] = useState(false);
   const kind = resolveAttachmentKind(attachment);
   const extension = getAttachmentExtension(attachment);
-  useEffect(() => setHasFailed(false), [source, thumbnailSource]);
+  const sourceDeps = [source, thumbnailSource];
+  const [prevSourceDeps, setPrevSourceDeps] = useState(null);
+  if (prevSourceDeps === null || sourceDeps.some((dep, index) => dep !== prevSourceDeps[index])) {
+    setPrevSourceDeps(sourceDeps);
+    setHasFailed(false);
+  }
   const handleError = useCallback(() => setHasFailed(true), []);
   const handleLoadedMetadata = useCallback(event => {
     const {

package/hooks/useLayer.js

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { useId, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
 const BASE_Z_INDEX = 10000;
 const Z_INDEX_STEP = 100;
 const GLOBAL_KEY = '__pushwoosh_dumb_components_layer_state__';
@@ -80,6 +80,12 @@ function resolveZIndex(id, fallbackZIndex) {
   }
   return fallbackZIndex ?? BASE_Z_INDEX;
 }
+function subscribeToLayers(onChange) {
+  getState().subscribers.add(onChange);
+  return () => {
+    getState().subscribers.delete(onChange);
+  };
+}
 /**
  * Manages a stacked overlay layer (modals, drawers, popovers): registers while
  * `isOpen`, computes a stacking `zIndex` above lower layers, and calls `onClose` on
@@ -97,14 +103,6 @@ export function useLayer({
   onCloseRef.current = onClose;
   const zIndexRef = useRef(zIndex);
   zIndexRef.current = zIndex;
-  const [, forceRender] = useState(0);
-  useEffect(() => {
-    const subscriber = () => forceRender(value => value + 1);
-    getState().subscribers.add(subscriber);
-    return () => {
-      getState().subscribers.delete(subscriber);
-    };
-  }, []);
   useLayoutEffect(() => {
     if (!isOpen) {
       return undefined;
@@ -114,7 +112,6 @@ export function useLayer({
       close: () => onCloseRef.current?.(),
       baseZIndex: zIndexRef.current
     });
-    forceRender(value => value + 1);
     return () => unregisterLayer(id);
   }, [isOpen, id]);
   useLayoutEffect(() => {
@@ -124,7 +121,7 @@ export function useLayer({
       notify();
     }
   }, [zIndex, id]);
-  const resolvedZIndex = resolveZIndex(id, zIndex);
+  const resolvedZIndex = useSyncExternalStore(subscribeToLayers, () => resolveZIndex(id, zIndex));
   return {
     zIndex: resolvedZIndex
   };

package/package.json

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

package/shared/dropdownField/useActiveIndex.js

@@ -1,16 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 /**
  * Holds the active (highlighted) row index, clamping it to `total` and resetting to
  * `resetIndex` when the list changes.
  */
 export function useActiveIndex(total, resetIndex) {
   const [activeIndex, setActiveIndex] = useState(resetIndex);
-  useEffect(() => {
-    setActiveIndex(prev => {
-      if (total === 0) return -1;
-      if (prev < 0 || prev >= total) return resetIndex;
-      return prev;
-    });
-  }, [total, resetIndex]);
+  const clampDeps = [total, resetIndex];
+  const [prevClampDeps, setPrevClampDeps] = useState(null);
+  if (prevClampDeps === null || clampDeps.some((dep, index) => dep !== prevClampDeps[index])) {
+    setPrevClampDeps(clampDeps);
+    if (total === 0) {
+      setActiveIndex(-1);
+    } else if (activeIndex < 0 || activeIndex >= total) {
+      setActiveIndex(resetIndex);
+    }
+  }
   return [activeIndex, setActiveIndex];
 }

package/shared/dropdownField/useDebouncedValue.js

@@ -2,9 +2,11 @@ import { useEffect, useState } from 'react';
 /** Returns `value` debounced by `delay` ms (updates immediately when `delay <= 0`). */
 export function useDebouncedValue(value, delay) {
   const [debounced, setDebounced] = useState(value);
+  if (delay <= 0 && debounced !== value) {
+    setDebounced(value);
+  }
   useEffect(() => {
     if (delay <= 0) {
-      setDebounced(value);
       return undefined;
     }
     const id = setTimeout(() => setDebounced(value), delay);