@pushwoosh/dumb-components 4.3.3 → 4.4.0

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/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/index.d.ts

@@ -19,7 +19,6 @@ export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
 export { RadioCard } from './RadioCard';
-export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';
 export { SplitButton, type SplitButtonProps } from './SplitButton';

package/index.js

@@ -19,7 +19,6 @@ export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
 export { RadioCard } from './RadioCard';
-export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
 export { SplitButton } from './SplitButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "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);

package/ReCaptcha/ReCaptcha.d.ts

@@ -1,10 +0,0 @@
-import { type ReactElement } from 'react';
-/**
- * Renders the (invisible) reCAPTCHA host element. Pair with {@link useRecaptcha} to
- * load the script and obtain tokens.
- *
- * @example
- * const { getRecaptchaToken } = useRecaptcha();
- * return <ReCaptcha />;
- */
-export declare function ReCaptcha(): ReactElement;

package/ReCaptcha/ReCaptcha.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RECAPTCHA_CONTAINER_ID } from './constants';
-import { RecaptchaElement } from './styles';
-/**
- * Renders the (invisible) reCAPTCHA host element. Pair with {@link useRecaptcha} to
- * load the script and obtain tokens.
- *
- * @example
- * const { getRecaptchaToken } = useRecaptcha();
- * return <ReCaptcha />;
- */
-export function ReCaptcha() {
-  return _jsx(RecaptchaElement, {
-    id: RECAPTCHA_CONTAINER_ID
-  });
-}

package/ReCaptcha/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const RECAPTCHA_KEY = "6LdS7DYUAAAAABVgt0djIBoyyMQ0oDAUl7jt1Mxh";
-export declare const RECAPTCHA_SCRIPT_URL = "https://www.google.com/recaptcha/api.js?render=explicit";
-export declare const RECAPTCHA_CONTAINER_ID = "g-recaptcha";

package/ReCaptcha/constants.js

@@ -1,4 +0,0 @@
-export const RECAPTCHA_KEY = '6LdS7DYUAAAAABVgt0djIBoyyMQ0oDAUl7jt1Mxh';
-// onload script: https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit'
-export const RECAPTCHA_SCRIPT_URL = 'https://www.google.com/recaptcha/api.js?render=explicit';
-export const RECAPTCHA_CONTAINER_ID = 'g-recaptcha';

package/ReCaptcha/helpers.d.ts

@@ -1,5 +0,0 @@
-/**
- * Injects a `<script>` with the given `src` once and resolves when it loads
- * (resolves immediately if already present); rejects on load error.
- */
-export declare function asyncScriptLoad(scriptUrl: string): Promise<Event | void>;

package/ReCaptcha/helpers.js

@@ -1,19 +0,0 @@
-/**
- * Injects a `<script>` with the given `src` once and resolves when it loads
- * (resolves immediately if already present); rejects on load error.
- */
-export async function asyncScriptLoad(scriptUrl) {
-  return new Promise((resolve, reject) => {
-    const isAlreadyLoaded = document.querySelector(`script[src="${scriptUrl}"]`);
-    if (isAlreadyLoaded) {
-      resolve();
-      return;
-    }
-    const script = document.createElement('script');
-    script.src = scriptUrl;
-    script.async = true;
-    document.body.appendChild(script);
-    script.onload = resolve;
-    script.onerror = reject;
-  });
-}

package/ReCaptcha/hooks.d.ts

@@ -1,6 +0,0 @@
-import type { RecaptchaExposedApi } from './types';
-/**
- * Loads the reCAPTCHA script, renders an invisible widget into the {@link ReCaptcha}
- * element, and returns `{ isRecaptchaReady, recaptchaErrorCode, getRecaptchaToken }`.
- */
-export declare function useRecaptcha(): RecaptchaExposedApi;

package/ReCaptcha/hooks.js

@@ -1,65 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { RECAPTCHA_KEY, RECAPTCHA_SCRIPT_URL, RECAPTCHA_CONTAINER_ID } from './constants';
-import { asyncScriptLoad } from './helpers';
-/**
- * Loads the reCAPTCHA script, renders an invisible widget into the {@link ReCaptcha}
- * element, and returns `{ isRecaptchaReady, recaptchaErrorCode, getRecaptchaToken }`.
- */
-export function useRecaptcha() {
-  const promiseRef = useRef({});
-  const [isRecaptchaLoaded, setRecaptchaLoaded] = useState(!!window?.grecaptcha?.render);
-  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'));
-  }, []);
-  // Set interval while library download and initialize
-  useEffect(() => {
-    const newInterval = window.setInterval(() => {
-      if (window?.grecaptcha?.render) {
-        setRecaptchaLoaded(true);
-      }
-    }, 500);
-    setIntervalID(newInterval);
-    return () => {
-      clearInterval(newInterval);
-    };
-  }, []);
-  // 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,
-          size: 'invisible',
-          callback: token => promiseRef.current?.resolve(token)
-          // 'expired-callback': () => {},
-          // 'error-callback': () => {},
-        });
-        setWidgetID(widget);
-        setRecaptchaReady(true);
-      } catch {
-        setRecaptchaErrorCode('RIE002');
-      }
-    }
-  }, [isRecaptchaLoaded, widgetID, intervalID, promiseRef]);
-  // async function to get recaptcha token, resolves by resolveAction callback
-  const getRecaptchaToken = useCallback(async () => new Promise((resolve, reject) => {
-    try {
-      window.grecaptcha.reset(widgetID);
-      window.grecaptcha.execute(widgetID);
-      promiseRef.current.resolve = resolve;
-    } catch (error) {
-      reject(error);
-    }
-  }), [widgetID, promiseRef]);
-  return {
-    isRecaptchaReady,
-    recaptchaErrorCode,
-    getRecaptchaToken
-  };
-}

package/ReCaptcha/index.d.ts

@@ -1,3 +0,0 @@
-export { ReCaptcha } from './ReCaptcha';
-export { useRecaptcha } from './hooks';
-export { asyncScriptLoad } from './helpers';

package/ReCaptcha/index.js

@@ -1,3 +0,0 @@
-export { ReCaptcha } from './ReCaptcha';
-export { useRecaptcha } from './hooks';
-export { asyncScriptLoad } from './helpers';

package/ReCaptcha/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const RecaptchaElement: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;

package/ReCaptcha/styles.js

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-export const RecaptchaElement = styled.div.withConfig({
-  displayName: "RecaptchaElement",
-  componentId: "sc-100g1t3-0"
-})(["display:none;"]);

package/ReCaptcha/types.d.ts

@@ -1,13 +0,0 @@
-/** Value returned by {@link useRecaptcha}. */
-export type RecaptchaExposedApi = {
-    /** Whether the widget is rendered and ready to execute. */
-    readonly isRecaptchaReady: boolean;
-    /** Internal error code (`RIExxx`), or empty string when there's no error. */
-    readonly recaptchaErrorCode: string;
-    /** Runs an invisible challenge and resolves with the verification token. */
-    readonly getRecaptchaToken: () => Promise<string>;
-};
-/** Holds the pending token resolver between `execute` and the reCAPTCHA callback. */
-export type PromiseRef = {
-    resolve?: (token: string) => void;
-};

package/ReCaptcha/types.js

@@ -1 +0,0 @@
-export {};