@dynamic-labs/sdk-react-core 0.19.0-alpha.25 → 0.19.0-alpha.27

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -6,24 +6,24 @@ var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
-var useInternalDynamicContext = require('../DynamicContext/useInternalDynamicContext.cjs');
-var ViewContext = require('../ViewContext/ViewContext.cjs');
-require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
-require('../../config/ApiEndpoint.cjs');
 var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
+var ViewContext = require('../ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
+var getReferencedAccount = require('../../utils/functions/getReferencedAccount/getReferencedAccount.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-var getReferencedAccount = require('../../utils/functions/getReferencedAccount/getReferencedAccount.cjs');
 var useVerifyWallet = require('../../utils/hooks/useVerifyWallet/useVerifyWallet.cjs');
 require('react-dom');
+var useInternalDynamicContext = require('../DynamicContext/useInternalDynamicContext.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
@@ -62,7 +62,7 @@ require('../UserFieldEditorContext/UserFieldEditorContext.cjs');
 const SocialRedirectContext = React.createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
@@ -74,9 +74,9 @@ const SocialRedirectContextProvider = ({ children, }) => {
     });
     const signInProvider = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.signInProvider;
     const enabledSocialProvidersInDb = (_c = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _b === void 0 ? void 0 : _b.providers) !== null && _c !== void 0 ? _c : [];
-    const enabledSocialProviders = (_d = enabledSocialProvidersInDb
+    const enabledSocialProviders = (_d = socialProvidersFilter(enabledSocialProvidersInDb
         .filter((provider) => provider.enabled)
-        .map((provider) => provider.provider)) !== null && _d !== void 0 ? _d : [];
+        .map((provider) => provider.provider))) !== null && _d !== void 0 ? _d : [];
     const socialWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)
         .find(walletConnectorCore.isSocialWalletConnector);

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -2,24 +2,24 @@ import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useMemo, useCallback, useEffect, useContext } from 'react';
 import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { useInternalDynamicContext } from '../DynamicContext/useInternalDynamicContext.js';
-import { useViewContext } from '../ViewContext/ViewContext.js';
-import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
-import '../../config/ApiEndpoint.js';
 import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/iconic';
+import { useViewContext } from '../ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
+import { getReferencedAccount } from '../../utils/functions/getReferencedAccount/getReferencedAccount.js';
+import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import { getReferencedAccount } from '../../utils/functions/getReferencedAccount/getReferencedAccount.js';
 import { useVerifyWallet } from '../../utils/hooks/useVerifyWallet/useVerifyWallet.js';
 import 'react-dom';
+import { useInternalDynamicContext } from '../DynamicContext/useInternalDynamicContext.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
@@ -58,7 +58,7 @@ import '../UserFieldEditorContext/UserFieldEditorContext.js';
 const SocialRedirectContext = createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
     var _a, _b, _c, _d;
-    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, } = useInternalDynamicContext();
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, setShowDynamicUserProfile, isAuthenticated, setPrimaryWalletId, secondaryWallets, sdkHasLoaded, authToken, connectWallet, primaryWallet, socialProvidersFilter = (providers) => providers, } = useInternalDynamicContext();
     const { setErrorMessage } = useErrorContext();
     const { setView } = useViewContext();
     const verifyWallet = useVerifyWallet({
@@ -70,9 +70,9 @@ const SocialRedirectContextProvider = ({ children, }) => {
     });
     const signInProvider = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.signInProvider;
     const enabledSocialProvidersInDb = (_c = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _b === void 0 ? void 0 : _b.providers) !== null && _c !== void 0 ? _c : [];
-    const enabledSocialProviders = (_d = enabledSocialProvidersInDb
+    const enabledSocialProviders = (_d = socialProvidersFilter(enabledSocialProvidersInDb
         .filter((provider) => provider.enabled)
-        .map((provider) => provider.provider)) !== null && _d !== void 0 ? _d : [];
+        .map((provider) => provider.provider))) !== null && _d !== void 0 ? _d : [];
     const socialWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)
         .find(isSocialWalletConnector);

package/src/lib/context/ViewContext/ViewContext.cjs

@@ -6,12 +6,25 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
 const ViewContext = React.createContext(undefined);
-const ViewContextProvider = ({ children, initialView = 'wallet-list' }) => {
+const ViewContextProvider = ({ children, initialView = 'wallet-list', internalEvents }) => {
     const [_view, setView] = React.useState(null);
     const view = _view || initialView;
     const goToInitialView = React.useCallback(() => {
         setView(null);
     }, [initialView]);
+    React.useEffect(() => {
+        if (!internalEvents) {
+            return;
+        }
+        const handleInternalLogoutEvent = () => {
+            goToInitialView();
+        };
+        const events = internalEvents.current;
+        events.on('logout', handleInternalLogoutEvent);
+        return () => {
+            events.off('logout', handleInternalLogoutEvent);
+        };
+    }, [goToInitialView, internalEvents]);
     const value = React.useMemo(() => ({
         goToInitialView,
         setView: setView,

package/src/lib/context/ViewContext/ViewContext.d.ts

@@ -1,4 +1,5 @@
-import { SetStateAction, Dispatch, PropsWithChildren, FC } from 'react';
+import { SetStateAction, Dispatch, PropsWithChildren, FC, MutableRefObject } from 'react';
+import { InternalEventEmitter } from '../DynamicContext/internalEvents';
 export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-wallet-only' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'multi-wallet-wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts' | 'wallet-cannot-be-transferred' | 'passkey-intro';
 export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
@@ -7,6 +8,7 @@ export type ViewContextProps = {
 };
 type ViewContextProviderProps = {
     initialView?: ViewType;
+    internalEvents?: MutableRefObject<InternalEventEmitter>;
 };
 export declare const ViewContext: import("react").Context<ViewContextProps | undefined>;
 export declare const ViewContextProvider: FC<PropsWithChildren<ViewContextProviderProps>>;

package/src/lib/context/ViewContext/ViewContext.js

@@ -1,13 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, useMemo, useContext } from 'react';
 
 const ViewContext = createContext(undefined);
-const ViewContextProvider = ({ children, initialView = 'wallet-list' }) => {
+const ViewContextProvider = ({ children, initialView = 'wallet-list', internalEvents }) => {
     const [_view, setView] = useState(null);
     const view = _view || initialView;
     const goToInitialView = useCallback(() => {
         setView(null);
     }, [initialView]);
+    useEffect(() => {
+        if (!internalEvents) {
+            return;
+        }
+        const handleInternalLogoutEvent = () => {
+            goToInitialView();
+        };
+        const events = internalEvents.current;
+        events.on('logout', handleInternalLogoutEvent);
+        return () => {
+            events.off('logout', handleInternalLogoutEvent);
+        };
+    }, [goToInitialView, internalEvents]);
     const value = useMemo(() => ({
         goToInitialView,
         setView: setView,

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.cjs

@@ -66,7 +66,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
-const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hideBridgeProgressSteppers, }) => {
+const DynamicAuthLayout = ({ children, className, style, onClose, projectSettings, hideBridgeProgressSteppers, }) => {
     const { view } = ViewContext.useViewContext();
     const { walletConnector, authMode } = useInternalDynamicContext.useInternalDynamicContext();
     const { isFooterExpanded } = index.useFooterAnimationContext();
@@ -77,7 +77,7 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
     const { showDynamicFooter } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
-    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsxRuntime.jsx(DynamicFooter.DynamicFooter, {}), showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { style: style, className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsxRuntime.jsx(DynamicFooter.DynamicFooter, {}), showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 exports.DynamicAuthLayout = DynamicAuthLayout;

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.d.ts

@@ -1,8 +1,8 @@
 import { FC, PropsWithChildren } from 'react';
 import { ProjectSettings } from '@dynamic-labs/sdk-api';
 import { ModalProps } from '../../shared';
-type DynamicAuthLayout = PropsWithChildren & Partial<ModalProps> & {
-    className?: string;
+import { ClassStyleProps } from '../../utils/types';
+type DynamicAuthLayout = PropsWithChildren & Partial<ModalProps> & ClassStyleProps & {
     projectSettings?: ProjectSettings;
     hideBridgeProgressSteppers?: boolean;
 };

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.js

@@ -62,7 +62,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 
-const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hideBridgeProgressSteppers, }) => {
+const DynamicAuthLayout = ({ children, className, style, onClose, projectSettings, hideBridgeProgressSteppers, }) => {
     const { view } = useViewContext();
     const { walletConnector, authMode } = useInternalDynamicContext();
     const { isFooterExpanded } = useFooterAnimationContext();
@@ -73,7 +73,7 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks(walletConnector);
     const { showDynamicFooter } = useAuthLayoutChecks(walletConnector);
-    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsx(DynamicFooter, {}), showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { style: style, className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsx(DynamicFooter, {}), showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 export { DynamicAuthLayout };

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.cjs

@@ -24,6 +24,7 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
@@ -56,10 +57,10 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.cjs');
 
-const DynamicUserProfileLayout = ({ variant, className, }) => {
+const DynamicUserProfileLayout = ({ variant, className, style, }) => {
     const { dynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
-    return (jsxRuntime.jsxs(OverlayCardTarget.OverlayCardTarget, { children: [shouldRenderHeader && jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, { variant: variant }), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }));
+    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs("div", { className: classNames.classNames(className, 'dynamic-user-profile-layout'), style: style, children: [shouldRenderHeader && jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, { variant: variant }), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }) }));
 };
 
 exports.DynamicUserProfileLayout = DynamicUserProfileLayout;

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.d.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
+import { ClassStyleProps } from '../../utils/types';
 import { DynamicWidgetHeaderProps } from '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader';
-type DynamicUserProfileLayoutProps = DynamicWidgetHeaderProps & {
-    className?: string;
-};
+type DynamicUserProfileLayoutProps = DynamicWidgetHeaderProps & ClassStyleProps;
 export declare const DynamicUserProfileLayout: FC<DynamicUserProfileLayoutProps>;
 export {};

package/src/lib/layout/DynamicUserProfileLayout/DynamicUserProfileLayout.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react';
 import 'react-dom';
 import '@dynamic-labs/utils';
@@ -20,6 +20,7 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
@@ -52,10 +53,10 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarget.js';
 
-const DynamicUserProfileLayout = ({ variant, className, }) => {
+const DynamicUserProfileLayout = ({ variant, className, style, }) => {
     const { dynamicWidgetView } = useWidgetContext();
     const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
-    return (jsxs(OverlayCardTarget, { children: [shouldRenderHeader && jsx(MemoizedDynamicWidgetHeader, { variant: variant }), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }));
+    return (jsx(OverlayCardTarget, { children: jsxs("div", { className: classNames(className, 'dynamic-user-profile-layout'), style: style, children: [shouldRenderHeader && jsx(MemoizedDynamicWidgetHeader, { variant: variant }), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }) }));
 };
 
 export { DynamicUserProfileLayout };

package/src/lib/shared/utils/hooks/useOnClickOutside/index.cjs

@@ -16,11 +16,11 @@ const useOnClickOutside = (ref, handler) => {
             }
             handler(event);
         };
-        document.addEventListener('mousedown', listener);
         document.addEventListener('touchstart', listener);
+        document.addEventListener('click', listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
             document.removeEventListener('touchstart', listener);
+            document.removeEventListener('click', listener);
         };
     }, [ref, handler]);
 };

package/src/lib/shared/utils/hooks/useOnClickOutside/index.js

@@ -12,11 +12,11 @@ const useOnClickOutside = (ref, handler) => {
             }
             handler(event);
         };
-        document.addEventListener('mousedown', listener);
         document.addEventListener('touchstart', listener);
+        document.addEventListener('click', listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
             document.removeEventListener('touchstart', listener);
+            document.removeEventListener('click', listener);
         };
     }, [ref, handler]);
 };