@pushwoosh/dumb-components 4.3.4 → 4.4.1

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.4",
+  "version": "4.4.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/useAsyncItems.js

@@ -12,9 +12,12 @@ export function useAsyncItems({
   debounceMs = DEFAULT_DEBOUNCE_MS,
   minChars = 0
 }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
+  const [state, setState] = useState({
+    session: 0,
+    items: [],
+    loading: false,
+    loadingMore: false
+  });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
   loadItemsRef.current = loadItems;
@@ -23,60 +26,85 @@ export function useAsyncItems({
   const queryRef = useRef('');
   const loadingRef = useRef(false);
   const hasMoreRef = useRef(false);
+  const sessionDeps = [debouncedQuery, isOpen, minChars];
+  const [prevSessionDeps, setPrevSessionDeps] = useState(null);
+  if (prevSessionDeps === null || sessionDeps.some((dep, index) => dep !== prevSessionDeps[index])) {
+    setPrevSessionDeps(sessionDeps);
+    const belowMin = debouncedQuery.trim().length < minChars;
+    setState(prev => ({
+      session: prev.session + 1,
+      items: !loadItems || belowMin ? [] : prev.items,
+      loading: Boolean(loadItems) && isOpen && !belowMin,
+      loadingMore: false
+    }));
+  }
+  const {
+    session
+  } = state;
   useEffect(() => {
     const loader = loadItemsRef.current;
     const belowMin = debouncedQuery.trim().length < minChars;
-    sessionRef.current += 1;
+    sessionRef.current = session;
     pageRef.current = 0;
     loadingRef.current = false;
     hasMoreRef.current = false;
-    setLoadingMore(false);
     if (!loader || !isOpen || belowMin) {
-      setLoading(false);
-      if (!loader || belowMin) setItems([]);
       return undefined;
     }
-    const session = sessionRef.current;
     queryRef.current = debouncedQuery;
     loadingRef.current = true;
-    setLoading(true);
     Promise.resolve(loader(debouncedQuery, 0)).then(result => {
       if (session !== sessionRef.current) return;
-      setItems(result.items);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        items: result.items,
+        loading: false
+      } : prev);
     }).catch(() => {
       if (session !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoading(false);
+      setState(prev => prev.session === session ? {
+        ...prev,
+        loading: false
+      } : prev);
     });
     return undefined;
-  }, [debouncedQuery, isOpen, minChars]);
+  }, [session, debouncedQuery, isOpen, minChars]);
   const loadMore = useCallback(() => {
     const loader = loadItemsRef.current;
     if (!loader || loadingRef.current || !hasMoreRef.current) return;
-    const session = sessionRef.current;
+    const loadSession = sessionRef.current;
     const nextPage = pageRef.current + 1;
     loadingRef.current = true;
-    setLoadingMore(true);
+    setState(prev => prev.session === loadSession ? {
+      ...prev,
+      loadingMore: true
+    } : prev);
     Promise.resolve(loader(queryRef.current, nextPage)).then(result => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       pageRef.current = nextPage;
-      setItems(prev => [...prev, ...result.items]);
       hasMoreRef.current = result.hasMore ?? false;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        items: [...prev.items, ...result.items],
+        loadingMore: false
+      } : prev);
     }).catch(() => {
-      if (session !== sessionRef.current) return;
+      if (loadSession !== sessionRef.current) return;
       loadingRef.current = false;
-      setLoadingMore(false);
+      setState(prev => prev.session === loadSession ? {
+        ...prev,
+        loadingMore: false
+      } : prev);
     });
   }, []);
   return {
-    items,
-    loading,
-    loadingMore,
+    items: state.items,
+    loading: state.loading,
+    loadingMore: state.loadingMore,
     loadMore
   };
 }

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,63 +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
-  // 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);
-        clearInterval(newInterval);
-      }
-    }, 500);
-    return () => {
-      clearInterval(newInterval);
-    };
-  }, []);
-  // Render recaptcha widget when script loaded, stop interval
-  useEffect(() => {
-    if (isRecaptchaLoaded && widgetID === null) {
-      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, 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 {};