@envive-ai/react-hooks 0.2.5 → 0.2.6-alpha

package/dist/src/contexts/userIdentityContext/userIdentityContext.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import UAParser from 'ua-parser-js';
+import Logger from '../../application/logging/logger';
+import CommerceApiClient from '../../application/commerce-api';
+import { useLocalStorage } from '../localStorageContext';
+import { v4 as uuid } from 'uuid';
+// Helper function from the original service
+const getUserAgentDetails = () => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const uaParser = new UAParser();
+    const result = uaParser.getResult();
+    return {
+        os: (_a = result === null || result === void 0 ? void 0 : result.os) === null || _a === void 0 ? void 0 : _a.name,
+        osVersion: (_b = result === null || result === void 0 ? void 0 : result.os) === null || _b === void 0 ? void 0 : _b.version,
+        deviceBrand: (_c = result === null || result === void 0 ? void 0 : result.device) === null || _c === void 0 ? void 0 : _c.vendor,
+        deviceManufacturer: (_d = result === null || result === void 0 ? void 0 : result.device) === null || _d === void 0 ? void 0 : _d.vendor,
+        deviceModel: (_e = result === null || result === void 0 ? void 0 : result.device) === null || _e === void 0 ? void 0 : _e.model,
+        browser: (_f = result === null || result === void 0 ? void 0 : result.browser) === null || _f === void 0 ? void 0 : _f.name,
+        browserVersion: (_g = result === null || result === void 0 ? void 0 : result.browser) === null || _g === void 0 ? void 0 : _g.version,
+        userAgent: result === null || result === void 0 ? void 0 : result.ua,
+    };
+};
+const UserIdentityContext = createContext(undefined);
+export const UserIdentityProvider = ({ children }) => {
+    const { getItem, setItem, isAvailable: localStorageIsReady } = useLocalStorage();
+    const [isReady, setIsReady] = useState(false);
+    useEffect(() => {
+        // Assuming CommerceApiClient and other dependencies are ready if localStorage is.
+        // In a more complex scenario, you might have more checks here.
+        setIsReady(localStorageIsReady);
+    }, [localStorageIsReady]);
+    const USER_ID_OVERRIDE_KEY = 'v1-spiffy-user-id-override';
+    const USER_ID_DEFAULT_KEY = 'v1-spiffy-user-id-default';
+    const getUserIdOverrideFromLocalStorage = useCallback(() => { var _a; return (_a = getItem(USER_ID_OVERRIDE_KEY)) !== null && _a !== void 0 ? _a : undefined; }, [getItem]);
+    const getUserIdDefaultFromLocalStorage = useCallback(() => { var _a; return (_a = getItem(USER_ID_DEFAULT_KEY)) !== null && _a !== void 0 ? _a : undefined; }, [getItem]);
+    const setUserIdDefaultInLocalStorage = useCallback((userId) => {
+        Logger.logInfo(`setUserIdDefaultInLocalStorage - Setting user_id=${userId}`);
+        setItem(USER_ID_DEFAULT_KEY, userId);
+        // window.dispatchEvent is handled by useLocalStorage now
+        return userId;
+    }, [setItem, USER_ID_DEFAULT_KEY]);
+    const setUserIdOverrideInLocalStorage = useCallback((userId) => {
+        Logger.logInfo(`setUserIdOverrideInLocalStorage - Setting user_id=${userId}`);
+        setItem(USER_ID_OVERRIDE_KEY, userId);
+        // window.dispatchEvent is handled by useLocalStorage now
+        return userId;
+    }, [setItem, USER_ID_OVERRIDE_KEY]);
+    const clearUserIdOverrideInLocalStorage = useCallback(() => {
+        Logger.logInfo(`clearUserIdOverrideInLocalStorage - Clearing user_id`);
+        // LocalStorageService.getLocalStorage()?.removeItem(USER_ID_OVERRIDE_KEY);
+        // window.dispatchEvent is handled by useLocalStorage now
+        setItem(USER_ID_OVERRIDE_KEY, ''); // Set to empty string to clear
+    }, [setItem, USER_ID_OVERRIDE_KEY]);
+    const getUserIdOrDefault = useCallback(() => {
+        const userIdOverride = getUserIdOverrideFromLocalStorage();
+        if (userIdOverride) {
+            return userIdOverride;
+        }
+        const defaultUserId = getUserIdDefaultFromLocalStorage();
+        if (defaultUserId) {
+            return defaultUserId;
+        }
+        return setUserIdDefaultInLocalStorage(`spiffy-user-id-${uuid()}`);
+    }, [
+        getUserIdOverrideFromLocalStorage,
+        getUserIdDefaultFromLocalStorage,
+        setUserIdDefaultInLocalStorage,
+    ]);
+    const identifyUser = useCallback(async () => {
+        if (!isReady) {
+            Logger.logWarn('[UserIdentityContext] Context not ready, skipping identifyUser', undefined);
+            return;
+        }
+        try {
+            // Temporarily commented out until WindowDataLayerService is resolved
+            // const cdpUserId = WindowDataLayerService.getGoogleAnalyticsClientId();
+            const cdpUserId = 'UNKNOWN_CDP_USER_ID'; // Placeholder
+            const userId = getUserIdOrDefault();
+            const userAgentDetails = getUserAgentDetails();
+            if (!cdpUserId) {
+                Logger.logWarn('[spiffy-ai] No GA Client ID found, skipping identifyUser', undefined);
+                return;
+            }
+            await CommerceApiClient.identifyUser(userId, cdpUserId, userAgentDetails);
+        }
+        catch (error) {
+            Logger.logError('[spiffy-ai] Error identifying user', error);
+        }
+    }, [isReady, getUserIdOrDefault]);
+    const value = useMemo(() => ({
+        identifyUser,
+        getUserIdOrDefault,
+        getUserIdOverrideFromLocalStorage,
+        getUserIdDefaultFromLocalStorage,
+        setUserIdDefaultInLocalStorage,
+        setUserIdOverrideInLocalStorage,
+        clearUserIdOverrideInLocalStorage,
+        isReady,
+    }), [
+        identifyUser,
+        getUserIdOrDefault,
+        getUserIdOverrideFromLocalStorage,
+        getUserIdDefaultFromLocalStorage,
+        setUserIdDefaultInLocalStorage,
+        setUserIdOverrideInLocalStorage,
+        clearUserIdOverrideInLocalStorage,
+        isReady,
+    ]);
+    return _jsx(UserIdentityContext.Provider, { value: value, children: children });
+};
+export const useUserIdentity = () => {
+    const context = useContext(UserIdentityContext);
+    if (!context) {
+        throw new Error('useUserIdentity must be used within a UserIdentityProvider');
+    }
+    return context;
+};

package/dist/src/events/index.js

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * A singleton class for dispatching Spiffy events to the document object.
+ * Provides functionality for adding default event data, managing listeners,
+ * and dispatching events.
+ *
+ * TODO: could add observability to the listeners, would need to track listeners
+ * internally.
+ */
+export class EventsDispatcher {
+    /**
+     * Adds event data to the eventData object, which is included by default for
+     * every event dispatched. E.g. could add in userId, variantInfo, etc. But
+     * make sure it is JSON serializable.
+     */
+    static addEventData(data) {
+        this.eventData = { ...this.eventData, ...data };
+    }
+    /**
+     * Dispatches an event with the given name and detail. If includeDefault is
+     * false, the default event data is excluded.
+     * @param eventName - the name of the event to dispatch, should be all caps
+     *   and start with SPIFFY_, e.g. "SPIFFY_FLOATING_CONTAINER_CREATED"
+     * @param detail - optional parameter to include extra event data
+     * @param includeDefault - optional parameter to exclude the default event
+     *   data
+     */
+    static dispatch(eventName, detail, includeDefault) {
+        if (detail === undefined) {
+            detail = {};
+        }
+        if (includeDefault === undefined) {
+            includeDefault = true;
+        }
+        const eventData = includeDefault ? { ...this.eventData, ...detail } : detail;
+        const event = new CustomEvent(eventName, {
+            detail: eventData,
+            bubbles: true,
+            composed: true,
+            cancelable: false,
+        });
+        window.dispatchEvent(event);
+    }
+    static addListener(eventName, listener) {
+        window.addEventListener(eventName, listener, { once: false, passive: false, capture: false });
+    }
+    static removeListener(eventName, listener) {
+        window.removeEventListener(eventName, listener);
+    }
+}
+EventsDispatcher.eventData = {};

package/dist/src/events/registerAnalyticsListeners.js

@@ -0,0 +1,32 @@
+import { getAtomStore } from 'src/atoms/atomStore/atomStore';
+import { pageLoadOffsetTimeAtom, performanceMetricsAtom, resetPerformanceMetricsAtom, } from 'src/atoms/chat';
+import { useAmplitudeTracking } from 'src/hooks/AmplitudeOperations/useAmplitudeOperations';
+import { useEffect } from 'react';
+import { SpiffyMetricsEventName } from '@envive-ai/types';
+export const useRegisterAnalyticsListeners = () => {
+    const { track } = useAmplitudeTracking();
+    const atomStore = getAtomStore();
+    useEffect(() => {
+        const performanceMetrics = atomStore.get(performanceMetricsAtom);
+        const pageLoadOffsetTime = atomStore.get(pageLoadOffsetTimeAtom);
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden' && performanceMetrics.size > 0) {
+                const perfMetricsProperties = Object.fromEntries(Array.from(performanceMetrics.entries()).map(([key, value]) => [
+                    `performanceMetrics.${key}`,
+                    value,
+                ]));
+                track(SpiffyMetricsEventName.PerformanceMetrics, {
+                    ...perfMetricsProperties,
+                    'performance_metrics.page_load_offset_ms': pageLoadOffsetTime,
+                });
+                resetPerformanceMetricsAtom();
+            }
+        };
+        // do not use anything other than visibilitychange to detect when a page or
+        // session has ended as other events may not fire in all browsers/devices
+        window.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            window.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [track]);
+};

package/dist/src/exceptions/index.js

@@ -0,0 +1,2 @@
+export { SessionRestartRequired } from './sessionExceptions';
+export { UnsupportedProductException } from './unsupportedProductExceptions';

package/dist/src/exceptions/sessionExceptions.js

@@ -0,0 +1,6 @@
+export class SessionRestartRequired extends Error {
+    constructor() {
+        super('Session restart required');
+        this.name = 'SessionRestartRequired';
+    }
+}

package/dist/src/exceptions/unsupportedProductExceptions.js

@@ -0,0 +1,6 @@
+export class UnsupportedProductException extends Error {
+    constructor() {
+        super('Unsupported product');
+        this.name = 'UnsupportedProductException';
+    }
+}

package/dist/src/hooks/AmplitudeOperations/index.js

@@ -0,0 +1 @@
+export * from "./useAmplitudeOperations";

package/dist/src/hooks/AmplitudeOperations/useAmplitudeOperations.js

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+export const useAmplitudeTracking = () => {
+    const { trackEvent, isReady } = useAmplitude();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const track = useCallback(async (eventName, eventProps) => {
+        if (!isReady)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            await trackEvent({ eventName, eventProps });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Tracking failed'));
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [trackEvent, isReady]);
+    return { track, loading, error, isReady };
+};

package/dist/src/hooks/AppDetails/index.js

@@ -0,0 +1 @@
+export * from "./useAppDetails";

package/dist/src/hooks/AppDetails/useAppDetails.js

@@ -0,0 +1,26 @@
+import { useAtomValue } from 'jotai';
+import { ContextEnvEnum, ContextSourceEnum } from '@spiffy-ai/commerce-api-client';
+import { variantInfoAtom } from 'src/atoms/app/variant';
+import { contextSourceAtom, envAtom as enviveEnvAtom, orgShortNameAtom as enviveOrgShortNameAtom, } from 'src/atoms/envive/enviveConfig';
+import { chatIdAtom, userIdAtom } from 'src/atoms/app/index';
+import { useOrgId } from 'src/hooks/GraphQLConfig/useGraphQLConfig';
+export const useAppDetails = () => {
+    var _a, _b, _c;
+    const { orgId: fetchedOrgId } = useOrgId(); // Get orgId from useOrgId hook
+    const orgId = fetchedOrgId !== null && fetchedOrgId !== void 0 ? fetchedOrgId : ''; // Provide a default empty string if undefined
+    const orgShortName = (_a = useAtomValue(enviveOrgShortNameAtom)) !== null && _a !== void 0 ? _a : 'spiffy-ai';
+    const chatId = useAtomValue(chatIdAtom);
+    const userId = useAtomValue(userIdAtom);
+    const source = (_b = useAtomValue(contextSourceAtom)) !== null && _b !== void 0 ? _b : ContextSourceEnum.App;
+    const env = (_c = useAtomValue(enviveEnvAtom)) !== null && _c !== void 0 ? _c : ContextEnvEnum.Dev; // Cast to ContextEnvEnum
+    const variantInfo = useAtomValue(variantInfoAtom);
+    return {
+        orgId,
+        orgShortName,
+        chatId,
+        userId,
+        source,
+        env,
+        variantInfo,
+    };
+};

package/dist/src/hooks/BlockBackButton/index.js

@@ -0,0 +1 @@
+export * from "./useBlockBackButton";

package/dist/src/hooks/BlockBackButton/useBlockBackButton.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+export const useBlockBackButton = (enabled, callback) => {
+    useEffect(() => {
+        if (enabled && window) {
+            if (window.history.scrollRestoration) {
+                window.history.scrollRestoration = "manual";
+            }
+            window.history.pushState(null, document.title, window.location.href);
+            window.onpopstate = (e) => {
+                e.preventDefault();
+                window.history.pushState(null, document.title, window.location.href);
+                callback === null || callback === void 0 ? void 0 : callback();
+            };
+        }
+        return () => {
+            if (enabled && window) {
+                window.history.back();
+                window.onpopstate = null;
+                window.history.scrollRestoration = "auto";
+            }
+        };
+    }, [enabled]);
+};

package/dist/src/hooks/CdnOperations/index.js

@@ -0,0 +1 @@
+export * from "./useCdnOperations";

package/dist/src/hooks/CdnOperations/useCdnOperations.js

@@ -0,0 +1,13 @@
+import { useCdn } from "../../contexts/cdnContext";
+export const useCdnUrl = () => {
+    const { cdnUrl } = useCdn();
+    return cdnUrl;
+};
+export const useCdnBasePath = () => {
+    const { getCdnBasePath } = useCdn();
+    return getCdnBasePath();
+};
+export const useAssetUrl = (assetName, orgShortName) => {
+    const { getAssetURL } = useCdn();
+    return getAssetURL(assetName, orgShortName);
+};

package/dist/src/hooks/ChatToggle/index.js

@@ -0,0 +1 @@
+export * from "./useChatToggle";

package/dist/src/hooks/ChatToggle/useChatToggle.js

@@ -0,0 +1,50 @@
+import { SpiffyMetricsEventName } from '@envive-ai/types';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { chatAtom, chatOnToggleAtom } from 'src/atoms/chat';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+export const useChatToggle = () => {
+    const onToggle = useSetAtom(chatOnToggleAtom);
+    const { isOpen } = useAtomValue(chatAtom);
+    const { trackEvent } = useAmplitude();
+    const toggle = (triggerLocation, triggerId) => {
+        if (!isOpen) {
+            trackEvent({
+                eventName: SpiffyMetricsEventName.ChatComponentExpanded,
+                eventProps: {
+                    message_metadata: {
+                        trigger_location: triggerLocation,
+                        trigger_id: triggerId,
+                    },
+                },
+            });
+        }
+        else {
+            trackEvent({
+                eventName: SpiffyMetricsEventName.ChatComponentCollapsed,
+                eventProps: {
+                    message_metadata: {
+                        trigger_location: triggerLocation,
+                        trigger_id: triggerId,
+                    },
+                },
+            });
+        }
+        onToggle();
+    };
+    const openChat = (triggerLocation, triggerId) => {
+        if (!isOpen) {
+            toggle(triggerLocation, triggerId);
+        }
+    };
+    const closeChat = (triggerLocation, triggerId) => {
+        if (isOpen) {
+            toggle(triggerLocation, triggerId);
+        }
+    };
+    return {
+        toggle,
+        isOpen,
+        openChat,
+        closeChat,
+    };
+};

package/dist/src/hooks/ChatToggleAnalytics/index.js

@@ -0,0 +1 @@
+export * from "./useChatToggleAnalytics";

package/dist/src/hooks/ChatToggleAnalytics/useChatToggleAnalytics.js

@@ -0,0 +1,11 @@
+import { useSetAtom } from 'jotai';
+import { chatOnToggleAtom } from 'src/atoms/chat/chatState';
+import { useAmplitudeTracking } from '../AmplitudeOperations';
+export const useChatToggleAnalytics = () => {
+    const setChatOnToggle = useSetAtom(chatOnToggleAtom);
+    const { track } = useAmplitudeTracking();
+    const toggleChat = (triggerLocation) => {
+        setChatOnToggle(triggerLocation, track);
+    };
+    return { toggleChat };
+};

package/dist/src/hooks/CustomerSupportHandoff/index.js

@@ -0,0 +1 @@
+export * from "./useCustomerSupportHandoff";

package/dist/src/hooks/CustomerSupportHandoff/useCustomerSupportHandoff.js

@@ -0,0 +1,32 @@
+import Logger from '../../application/logging/logger';
+import { useCallback } from 'react';
+/**
+ * Hook to call the `click` method of the merchant's customer support chat widget.
+ *
+ * @param onSwitchToAgent a function to override the function returned by the hook. This is mainly to
+ * preserve backward compatibility for merchants not using Kustomer and will be removed when all
+ * CS integrations are handled.
+ *
+ * @returns a function that searches for the customer support chat widget and calls the `click` method.
+ */
+export const useCustomerSupportHandoff = (onSwitchToAgent) => {
+    // TODO handle Gorgias
+    const onKustomerSwitch = useCallback(() => {
+        var _a, _b;
+        const kustomerElement = document.getElementById('kustomer-ui-sdk-iframe');
+        if (kustomerElement == null || !(kustomerElement instanceof HTMLIFrameElement)) {
+            Logger.logError('[spiffy-ai] Kustomer iFrame element not found', undefined);
+            return;
+        }
+        const kustomerButton = (_b = (_a = kustomerElement.contentWindow) === null || _a === void 0 ? void 0 : _a.document) === null || _b === void 0 ? void 0 : _b.getElementById('rootChatIcon');
+        if (kustomerButton == null) {
+            Logger.logError('[spiffy-ai] Kustomer button not found', undefined);
+            return;
+        }
+        kustomerButton.click();
+    }, []);
+    if (onSwitchToAgent != null) {
+        return { onSwitch: onSwitchToAgent };
+    }
+    return { onSwitch: onKustomerSwitch };
+};

package/dist/src/hooks/Debounce/index.js

@@ -0,0 +1 @@
+export * from "./useDebounce";

package/dist/src/hooks/Debounce/useDebounce.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/src/hooks/ElementObserver/index.js

@@ -0,0 +1 @@
+export * from "./useElementObserver";

package/dist/src/hooks/ElementObserver/useElementObserver.js

@@ -0,0 +1,208 @@
+import { useEffect, useRef, useState } from 'react';
+import { DOMObserver } from 'src/application/utils/domObserver';
+/*
+>>>>
+<task_progress>
+- [ ] Identify all exported types across the codebase.
+- [x] Create individual type files in `/types` for each type.
+- [x] Move `ElementObserverUtility` to `src/types/ElementObserverUtility.ts`.
+- [ ] Update `src/hooks/ElementObserver/useElementObserver.ts` to import and use the new type.
+- [ ] Update `/types/index.ts` by adding export for `./ElementObserverUtility`.
+</task_progress>
+ * This hook enables the connection between a `MutationObserver` and a React.js component.
+ * It abstracts all the necessary validations and implementations to modify HTML elements,
+ * monitor their changes, and interact with them. The only required input is the element's selector.
+ *
+ * How to use it:
+ *
+ * Let's assume we want to interact with the following element:
+ * `<div id="awesome-content"><content /></div>`
+ *
+ * To hook into that element, simply do the following:
+ * `const element = useElementObserver(SelectorFactory.id("awesome-content"))`
+ *
+ * With the `ElementObserver` instance in hand, we can interact with the HTML element without having
+ * to manage its presence in the DOM. The `onAdd` and `onRemove` functions can be used to determine
+ * whether the element is present in the DOM or not, and to ensure interaction occurs only when necessary.
+ *
+ * @param selector
+ * @returns
+ */
+export const useElementObserver = (selector) => {
+    const INITIAL_RENDER_STATE = true;
+    const eoRef = useRef(DOMObserver.add(selector));
+    const [renderBlocked, setRenderBlocked] = useState(INITIAL_RENDER_STATE);
+    /**
+     * Fired every time the HTML element changes.
+     *
+     * @param fn
+     */
+    const onChange = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnChange(fn);
+    };
+    /**
+     * Fired when the HTML element is added to the DOM.
+     *
+     * @param fn
+     */
+    const onAdd = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnAdd(fn);
+    };
+    /**
+     * Fired when the HTML element is removed from the DOM.
+     *
+     * @param fn
+     */
+    const onRemove = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnRemove(fn);
+    };
+    /**
+     * Fired when the class of the HTML element changes.
+     *
+     * @param fn
+     */
+    const onClassChange = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnclassChange(fn);
+    };
+    /**
+     * Fired when a class is added to the HTML element.
+     *
+     * @param className
+     * @param fn
+     */
+    const onClassAdded = (className, fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnClassAdded(className, fn);
+    };
+    /**
+     * Fired when a class is removed from the HTML element.
+     *
+     * @param className
+     * @param fn
+     */
+    const onClassRemoved = (className, fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnClassRemoved(className, fn);
+    };
+    /**
+     * Fired when a child element is added to the HTML element.
+     *
+     * @param fn
+     */
+    const onAddChild = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnAddChild(fn);
+    };
+    /**
+     * Fired when a child element is removed from the HTML element.
+     *
+     * @param fn
+     */
+    const onRemoveChild = (fn) => {
+        var _a;
+        (_a = eoRef.current) === null || _a === void 0 ? void 0 : _a.registerOnRemoveChild(fn);
+    };
+    /**
+     * Allows hooking event listeners to the HTML element, such as `focus`, `blur`, etc.
+     *
+     * @param event
+     * @param fn
+     */
+    const onEvent = (event, fn) => {
+        eoRef.current.registerEvent(event, fn);
+    };
+    /**
+     * Useful when rendering a React.js component inside the HTML element.
+     *
+     * @param fn
+     * @returns
+     */
+    const render = (fn) => !renderBlocked ? eoRef.current.render(fn) : undefined;
+    /**
+     * Checks if the element exists in the DOM.
+     *
+     * @returns
+     */
+    const exists = () => !!eoRef.current.getNode();
+    /**
+     * Checks if rendering is unblocked.
+     *
+     * @returns
+     */
+    const isRendered = () => !renderBlocked;
+    /**
+     * Triggers an event for the HTML element.
+     *
+     * @param event
+     */
+    const fire = (event) => {
+        eoRef.current.fire(event);
+    };
+    /**
+     * Shows the HTML element.
+     *
+     * @returns
+     */
+    const show = () => eoRef.current.show();
+    /**
+     * Hides the HTML element.
+     *
+     * @returns
+     */
+    const hide = () => eoRef.current.hide();
+    /**
+     * Blocks the rendering of elements.
+     *
+     * @returns
+     */
+    const blockRendering = () => setRenderBlocked(true);
+    /**
+     * Unblocks the rendering of elements.
+     *
+     * @returns
+     */
+    const unblockRendering = () => setRenderBlocked(false);
+    /**
+     * Applies CSS styles to the HTML element.
+     *
+     * @param styles
+     */
+    const applyStyle = (styles) => {
+        var _a;
+        const node = (_a = eoRef === null || eoRef === void 0 ? void 0 : eoRef.current) === null || _a === void 0 ? void 0 : _a.getNode();
+        if (node) {
+            Object.assign(node.style, styles);
+        }
+    };
+    useEffect(() => {
+        eoRef.current.init();
+        eoRef.current.registerOnReset(() => setRenderBlocked(INITIAL_RENDER_STATE));
+        DOMObserver.observe();
+        return () => DOMObserver.remove(selector);
+    }, [selector.getPattern()]);
+    return {
+        targetNode: eoRef.current.getNode(),
+        onChange,
+        onAdd,
+        onRemove,
+        onClassChange,
+        onClassAdded,
+        onClassRemoved,
+        onAddChild,
+        onRemoveChild,
+        onEvent,
+        blockRendering,
+        unblockRendering,
+        exists,
+        isRendered,
+        render,
+        fire,
+        show,
+        hide,
+        applyStyle,
+    };
+};

package/dist/src/hooks/GrabAndScroll/index.js

@@ -0,0 +1 @@
+export * from "./useGrabAndScroll";