@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0

package/hooks/useMutationObserver.js

@@ -1,36 +1,17 @@
-import { useRef, useLayoutEffect, useCallback } from 'react';
-import { noop } from 'es-toolkit/compat';
-// Options for the observer (which mutations to observe)
-const DEFAULT_OPTIONS = {
-    attributes: true,
-    childList: false,
-    subtree: false,
+import { useRef as f, useCallback as u, useLayoutEffect as i } from "react";
+import { noop as l } from "es-toolkit/compat";
+const a = {
+  attributes: !0,
+  childList: !1,
+  subtree: !1
+}, b = (e) => e !== null && typeof e == "object" && Object.hasOwn(e, "current"), O = (e) => b(e) ? e.current : e, d = (e, n = l, r = a) => {
+  const t = f(null), s = u(() => t.current?.disconnect(), []), o = u(() => {
+    const c = O(e);
+    c && (t.current = new MutationObserver(n), t.current.observe(c, r));
+  }, [n, r, e]);
+  i(() => (o(), () => s()), [s, o]);
 };
-const isRef = (obj) => obj !== null && typeof obj === 'object' && Object.hasOwn(obj, 'current');
-const unRef = (target) => isRef(target) ? target.current : target;
-/**
- * Custom hook to observe mutations on a target element.
- *
- * @param {HTMLElement | MutableRefObject<HTMLElement | null> | null} target - The element or ref to observe.
- * @param {MutationCallback | undefined} callback - The callback function to execute when mutations occur.
- * @param {object} options - Options to configure the MutationObserver.
- * @param {boolean} options.attributes - Set to true if attribute mutations should be observed.
- * @param {boolean} options.childList - Set to true if mutations to target's children should be observed.
- * @param {boolean} options.subtree - Set to true if mutations to target's descendants should be observed.
- */
-const useMutationObserver = (target, callback = noop, options = DEFAULT_OPTIONS) => {
-    const observer = useRef(null);
-    const disconnect = useCallback(() => observer.current?.disconnect(), []);
-    const observe = useCallback(() => {
-        const targetElement = unRef(target);
-        if (targetElement) {
-            observer.current = new MutationObserver(callback);
-            observer.current.observe(targetElement, options);
-        }
-    }, [callback, options, target]);
-    useLayoutEffect(() => {
-        observe();
-        return () => disconnect();
-    }, [disconnect, observe]);
+export {
+  d as default
 };
-export default useMutationObserver;
+//# sourceMappingURL=useMutationObserver.js.map

package/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutationObserver.js","sources":["../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import { useRef, useLayoutEffect, useCallback, type MutableRefObject } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nexport type Options = {\n    attributes?: boolean;\n    childList?: boolean;\n    subtree?: boolean;\n};\n\n// Options for the observer (which mutations to observe)\nconst DEFAULT_OPTIONS: Options = {\n    attributes: true,\n    childList: false,\n    subtree: false,\n};\n\nconst isRef = (obj: unknown): obj is MutableRefObject<HTMLElement | null> =>\n    obj !== null && typeof obj === 'object' && Object.hasOwn(obj, 'current');\n\nconst unRef = (target: HTMLElement | MutableRefObject<HTMLElement | null> | null): HTMLElement | null =>\n    isRef(target) ? target.current : target;\n\n/**\n * Custom hook to observe mutations on a target element.\n *\n * @param {HTMLElement | MutableRefObject<HTMLElement | null> | null} target - The element or ref to observe.\n * @param {MutationCallback | undefined} callback - The callback function to execute when mutations occur.\n * @param {object} options - Options to configure the MutationObserver.\n * @param {boolean} options.attributes - Set to true if attribute mutations should be observed.\n * @param {boolean} options.childList - Set to true if mutations to target's children should be observed.\n * @param {boolean} options.subtree - Set to true if mutations to target's descendants should be observed.\n */\nconst useMutationObserver = (\n    target: HTMLElement | MutableRefObject<HTMLElement | null> | null,\n    callback: MutationCallback | undefined = noop,\n    options: {\n        attributes?: boolean;\n        childList?: boolean;\n        subtree?: boolean;\n    } = DEFAULT_OPTIONS\n) => {\n    const observer = useRef<MutationObserver | null>(null);\n\n    const disconnect = useCallback(() => observer.current?.disconnect(), []);\n\n    const observe = useCallback(() => {\n        const targetElement = unRef(target);\n\n        if (targetElement) {\n            observer.current = new MutationObserver(callback);\n            observer.current.observe(targetElement, options);\n        }\n    }, [callback, options, target]);\n\n    useLayoutEffect(() => {\n        observe();\n        return () => disconnect();\n    }, [disconnect, observe]);\n};\n\nexport default useMutationObserver;\n"],"names":["DEFAULT_OPTIONS","isRef","obj","unRef","target","useMutationObserver","callback","noop","options","observer","useRef","disconnect","useCallback","observe","targetElement","useLayoutEffect"],"mappings":";;AAUA,MAAMA,IAA2B;AAAA,EAC7B,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AACb,GAEMC,IAAQ,CAACC,MACXA,MAAQ,QAAQ,OAAOA,KAAQ,YAAY,OAAO,OAAOA,GAAK,SAAS,GAErEC,IAAQ,CAACC,MACXH,EAAMG,CAAM,IAAIA,EAAO,UAAUA,GAY/BC,IAAsB,CACxBD,GACAE,IAAyCC,GACzCC,IAIIR,MACH;AACD,QAAMS,IAAWC,EAAgC,IAAI,GAE/CC,IAAaC,EAAY,MAAMH,EAAS,SAAS,WAAA,GAAc,EAAE,GAEjEI,IAAUD,EAAY,MAAM;AAC9B,UAAME,IAAgBX,EAAMC,CAAM;AAElC,IAAIU,MACAL,EAAS,UAAU,IAAI,iBAAiBH,CAAQ,GAChDG,EAAS,QAAQ,QAAQK,GAAeN,CAAO;AAAA,EAEvD,GAAG,CAACF,GAAUE,GAASJ,CAAM,CAAC;AAE9B,EAAAW,EAAgB,OACZF,EAAA,GACO,MAAMF,EAAA,IACd,CAACA,GAAYE,CAAO,CAAC;AAC5B;"}

package/hooks/useOnMount.d.ts

@@ -1,4 +1,4 @@
-import { type DependencyList } from 'react';
+import { DependencyList } from 'react';
 /**
  * Custom hook to execute a callback function only on component mount.
  *

package/hooks/useOnMount.js

@@ -1,17 +1,12 @@
-import { useEffect, useRef } from 'react';
-/**
- * Custom hook to execute a callback function only on component mount.
- *
- * @param callback - The callback function to be executed on mount.
- * @param deps - The dependencies array for the useEffect hook.
- */
-const useOnMount = (callback, deps) => {
-    const componentJustMountedRef = useRef(true);
-    useEffect(() => {
-        if (componentJustMountedRef.current) {
-            componentJustMountedRef.current = false;
-            return callback();
-        }
-    }, deps);
+import { useRef as n, useEffect as r } from "react";
+const f = (t, u) => {
+  const e = n(!0);
+  r(() => {
+    if (e.current)
+      return e.current = !1, t();
+  }, u);
 };
-export default useOnMount;
+export {
+  f as default
+};
+//# sourceMappingURL=useOnMount.js.map

package/hooks/useOnMount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnMount.js","sources":["../../src/hooks/useOnMount.ts"],"sourcesContent":["import { useEffect, useRef, type DependencyList } from 'react';\n\n/**\n * Custom hook to execute a callback function only on component mount.\n *\n * @param callback - The callback function to be executed on mount.\n * @param deps - The dependencies array for the useEffect hook.\n */\nconst useOnMount = (callback: () => void, deps: DependencyList) => {\n    const componentJustMountedRef = useRef(true);\n\n    useEffect(() => {\n        if (componentJustMountedRef.current) {\n            componentJustMountedRef.current = false;\n            return callback();\n        }\n    }, deps);\n};\n\nexport default useOnMount;\n"],"names":["useOnMount","callback","deps","componentJustMountedRef","useRef","useEffect"],"mappings":";AAQA,MAAMA,IAAa,CAACC,GAAsBC,MAAyB;AAC/D,QAAMC,IAA0BC,EAAO,EAAI;AAE3C,EAAAC,EAAU,MAAM;AACZ,QAAIF,EAAwB;AACxB,aAAAA,EAAwB,UAAU,IAC3BF,EAAA;AAAA,EAEf,GAAGC,CAAI;AACX;"}

package/hooks/useOnScreen.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { RefObject } from 'react';
 export type UseOnScreen = (ref: RefObject<HTMLElement>, options?: {
     rootMargin?: string;
     threshold?: number | number[];

package/hooks/useOnScreen.js

@@ -1,41 +1,16 @@
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js
-import { useEffect, useState } from 'react';
-/**
- * Custom React hook to detect whether an element is within the viewport.
- *
- * @param {RefObject<HTMLElement>} ref - Reference object for the target element to observe.
- * @param {object} [options] - Options for configuring the IntersectionObserver.
- * @param {string} [options.rootMargin='0px'] - Margin around the root (viewport) to track intersections.
- * @param {number | number[]} [options.threshold] - A single threshold value or an array of threshold values
- *        which indicate the percentage of the target element's visibility needed to trigger the callback.
- *
- * @returns {boolean} - Boolean value indicating whether the target element is currently visible in the viewport.
- */
-const useOnScreen = (ref, options = { rootMargin: '0px' }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        /**
-         * Callback function for IntersectionObserver.
-         *
-         * @param {IntersectionObserverEntry[]} entries - An array of IntersectionObserverEntry objects describing
-         * the intersection between the target element and its root container at a specific moment of transition.
-         */
-        const callback = ([entry]) => setIsVisible(entry.isIntersecting);
-        // Create a new IntersectionObserver instance
-        const observer = new IntersectionObserver(callback, options);
-        // Start observing the target element
-        observer.observe(ref.current);
-        // Cleanup function to stop observing the target element when the component unmounts
-        return () => {
-            if (!ref.current) {
-                return;
-            }
-            observer.unobserve(ref.current);
-        };
-    }, [ref, options]);
-    return isVisible;
+import { useState as i, useEffect as o } from "react";
+const b = (e, r = { rootMargin: "0px" }) => {
+  const [n, s] = i(!1);
+  return o(() => {
+    if (!e.current)
+      return;
+    const c = ([u]) => s(u.isIntersecting), t = new IntersectionObserver(c, r);
+    return t.observe(e.current), () => {
+      e.current && t.unobserve(e.current);
+    };
+  }, [e, r]), n;
 };
-export default useOnScreen;
+export {
+  b as default
+};
+//# sourceMappingURL=useOnScreen.js.map

package/hooks/useOnScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnScreen.js","sources":["../../src/hooks/useOnScreen.ts"],"sourcesContent":["// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js\nimport { useEffect, useState, type RefObject } from 'react';\n\nexport type UseOnScreen = (\n    ref: RefObject<HTMLElement>,\n    options?: {\n        rootMargin?: string;\n        threshold?: number | number[];\n    }\n) => boolean;\n\n/**\n * Custom React hook to detect whether an element is within the viewport.\n *\n * @param {RefObject<HTMLElement>} ref - Reference object for the target element to observe.\n * @param {object} [options] - Options for configuring the IntersectionObserver.\n * @param {string} [options.rootMargin='0px'] - Margin around the root (viewport) to track intersections.\n * @param {number | number[]} [options.threshold] - A single threshold value or an array of threshold values\n *        which indicate the percentage of the target element's visibility needed to trigger the callback.\n *\n * @returns {boolean} - Boolean value indicating whether the target element is currently visible in the viewport.\n */\nconst useOnScreen: UseOnScreen = (\n    ref: RefObject<HTMLElement>,\n    options: { rootMargin?: string; threshold?: number | number[] } = { rootMargin: '0px' }\n): boolean => {\n    const [isVisible, setIsVisible] = useState(false);\n\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        /**\n         * Callback function for IntersectionObserver.\n         *\n         * @param {IntersectionObserverEntry[]} entries - An array of IntersectionObserverEntry objects describing\n         * the intersection between the target element and its root container at a specific moment of transition.\n         */\n        const callback = ([entry]: IntersectionObserverEntry[]) => setIsVisible(entry.isIntersecting);\n\n        // Create a new IntersectionObserver instance\n        const observer = new IntersectionObserver(callback, options);\n\n        // Start observing the target element\n        observer.observe(ref.current);\n\n        // Cleanup function to stop observing the target element when the component unmounts\n        return () => {\n            if (!ref.current) {\n                return;\n            }\n            observer.unobserve(ref.current);\n        };\n    }, [ref, options]);\n\n    return isVisible;\n};\n\nexport default useOnScreen;\n"],"names":["useOnScreen","ref","options","isVisible","setIsVisible","useState","useEffect","callback","entry","observer"],"mappings":";AAsBA,MAAMA,IAA2B,CAC7BC,GACAC,IAAkE,EAAE,YAAY,YACtE;AACV,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,SAAAC,EAAU,MAAM;AACZ,QAAI,CAACL,EAAI;AACL;AASJ,UAAMM,IAAW,CAAC,CAACC,CAAK,MAAmCJ,EAAaI,EAAM,cAAc,GAGtFC,IAAW,IAAI,qBAAqBF,GAAUL,CAAO;AAG3D,WAAAO,EAAS,QAAQR,EAAI,OAAO,GAGrB,MAAM;AACT,MAAKA,EAAI,WAGTQ,EAAS,UAAUR,EAAI,OAAO;AAAA,IAClC;AAAA,EACJ,GAAG,CAACA,GAAKC,CAAO,CAAC,GAEVC;AACX;"}

package/hooks/useOnboarding.d.ts

@@ -1,5 +1,4 @@
-import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons, type DriveStep, type DriverHook } from 'driver.js';
-import 'driver.js/dist/driver.css';
+import { PopoverDOM as DriverPopoverDOM, State as DriverState, AllowedButtons, DriveStep, DriverHook } from 'driver.js';
 export type PopoverDOM = DriverPopoverDOM;
 export type OnboardingState = DriverState;
 type DriverCallbackOptions = Parameters<DriverHook>[2];

package/hooks/useOnboarding.js

@@ -1,89 +1,96 @@
-import { driver, } from 'driver.js';
-import 'driver.js/dist/driver.css';
-export const useOnboardingTour = (params) => {
-    const { steps, prevBtnText = 'Previous', nextBtnText = 'Next', doneBtnText = 'Done', showProgress = true, allowClose = false, stagePadding = 10, stageRadius = 5, allowKeyboardControl = true, showButtons, disableButtons, popoverClass, noBackdrop = false, onPopoverRender = () => { }, onDestroyed = () => { }, ...driverProps } = params;
-    const handlePopoverRender = (popover, options) => {
-        onPopoverRender(popover, options.state);
-    };
-    const handleDestroyed = () => {
-        onDestroyed();
-    };
-    const isSingleStep = !steps || steps.length === 1;
-    // This configuration is applied to all steps.
-    // Driver.js allows also for individual customization for single steps too.
-    const driverInstance = driver({
-        steps,
-        prevBtnText,
-        nextBtnText,
-        doneBtnText,
-        showProgress: isSingleStep ? false : showProgress,
-        showButtons: isSingleStep ? ['close'] : showButtons,
-        allowClose,
-        overlayOpacity: noBackdrop ? 0 : 0.5,
-        disableButtons,
-        progressText: '{{current}} / {{total}}',
-        overlayColor: 'var(--color-black)',
-        stagePadding,
-        stageRadius,
-        allowKeyboardControl,
-        popoverClass,
-        onPopoverRender: handlePopoverRender,
-        onDestroyed: handleDestroyed,
-        ...driverProps,
-    });
-    return {
-        // Use for onboarding tours. Pass in all steps as "steps" parameter for initial configuration.
-        run: () => driverInstance.drive(),
-        // Use for single element highlights -> see useOnboardingTip
-        // highlight: (step: OnboardingStep) => driverInstance.highlight(step),
-        // Cleanup the onboarding
-        destroy: () => driverInstance.destroy(),
-        // Gets the current state of the onboarding with the current step
-        onboardingState: () => driverInstance.getState(),
-        // Recalculate and redraw the highlight
-        refresh: () => driverInstance.refresh(),
-        // Is the tour or highlight currently active
-        isActive: () => driverInstance.isActive(),
-        // Move to the next step
-        moveNext: () => driverInstance.moveNext(),
-        // Move to the previous step
-        movePrevious: () => driverInstance.movePrevious(),
-        // Move to the step 4
-        moveTo: (stepNumber) => driverInstance.moveTo(stepNumber),
-        // Is there a next step
-        hasNextStep: () => driverInstance.hasNextStep(),
-        // Is there a previous step
-        hasPreviousStep: () => driverInstance.hasPreviousStep(),
-        // Is the current step the first step
-        isFirstStep: () => driverInstance.isFirstStep(),
-        // Is the current step the last step
-        isLastStep: () => driverInstance.isLastStep(),
-        // Gets the active step index
-        getActiveIndex: () => driverInstance.getActiveIndex(),
-    };
+import { driver as l } from "driver.js";
+import "driver.js/dist/driver.css";
+const A = (s) => {
+  const {
+    steps: t,
+    prevBtnText: r = "Previous",
+    nextBtnText: n = "Next",
+    doneBtnText: i = "Done",
+    showProgress: o = !0,
+    allowClose: a = !1,
+    stagePadding: p = 10,
+    stageRadius: c = 5,
+    allowKeyboardControl: g = !0,
+    showButtons: h,
+    disableButtons: u,
+    popoverClass: y,
+    noBackdrop: x = !1,
+    onPopoverRender: P = () => {
+    },
+    onDestroyed: S = () => {
+    },
+    ...m
+  } = s, f = (d, T) => {
+    P(d, T.state);
+  }, B = () => {
+    S();
+  }, v = !t || t.length === 1, e = l({
+    steps: t,
+    prevBtnText: r,
+    nextBtnText: n,
+    doneBtnText: i,
+    showProgress: v ? !1 : o,
+    showButtons: v ? ["close"] : h,
+    allowClose: a,
+    overlayOpacity: x ? 0 : 0.5,
+    disableButtons: u,
+    progressText: "{{current}} / {{total}}",
+    overlayColor: "var(--color-black)",
+    stagePadding: p,
+    stageRadius: c,
+    allowKeyboardControl: g,
+    popoverClass: y,
+    onPopoverRender: f,
+    onDestroyed: B,
+    ...m
+  });
+  return {
+    // Use for onboarding tours. Pass in all steps as "steps" parameter for initial configuration.
+    run: () => e.drive(),
+    // Use for single element highlights -> see useOnboardingTip
+    // highlight: (step: OnboardingStep) => driverInstance.highlight(step),
+    // Cleanup the onboarding
+    destroy: () => e.destroy(),
+    // Gets the current state of the onboarding with the current step
+    onboardingState: () => e.getState(),
+    // Recalculate and redraw the highlight
+    refresh: () => e.refresh(),
+    // Is the tour or highlight currently active
+    isActive: () => e.isActive(),
+    // Move to the next step
+    moveNext: () => e.moveNext(),
+    // Move to the previous step
+    movePrevious: () => e.movePrevious(),
+    // Move to the step 4
+    moveTo: (d) => e.moveTo(d),
+    // Is there a next step
+    hasNextStep: () => e.hasNextStep(),
+    // Is there a previous step
+    hasPreviousStep: () => e.hasPreviousStep(),
+    // Is the current step the first step
+    isFirstStep: () => e.isFirstStep(),
+    // Is the current step the last step
+    isLastStep: () => e.isLastStep(),
+    // Gets the active step index
+    getActiveIndex: () => e.getActiveIndex()
+  };
+}, C = (s) => {
+  const { allowClose: t = !0, stagePadding: r = 0, stageRadius: n = 5, noBackdrop: i = !0 } = s || {}, o = l({
+    allowClose: t,
+    stagePadding: r,
+    stageRadius: n,
+    overlayOpacity: i ? 0 : 0.5,
+    overlayColor: void 0
+  });
+  return {
+    highlight: (a) => o.highlight(a),
+    destroy: () => o.destroy(),
+    refresh: () => o.refresh(),
+    isActive: () => o.isActive()
+  };
 };
-/**
- * Note: please use the {@link import('../components/onboarding/OnboardingTip')#default OnboardingTip} instead of this
- * hook!
- *
- * This is kept only for future development of driver.js with the hope to solve the global driver styling issue and to
- * eventually replace the OnboardingTooltip also with driver.js.
- *
- * @experimental
- */
-export const useOnboardingTip = (options) => {
-    const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};
-    const driverInstance = driver({
-        allowClose,
-        stagePadding,
-        stageRadius,
-        overlayOpacity: noBackdrop ? 0 : 0.5,
-        overlayColor: undefined,
-    });
-    return {
-        highlight: (step) => driverInstance.highlight(step),
-        destroy: () => driverInstance.destroy(),
-        refresh: () => driverInstance.refresh(),
-        isActive: () => driverInstance.isActive(),
-    };
+export {
+  C as useOnboardingTip,
+  A as useOnboardingTour
 };
+//# sourceMappingURL=useOnboarding.js.map

package/hooks/useOnboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.js","sources":["../../src/hooks/useOnboarding.ts"],"sourcesContent":["import {\n    driver,\n    type PopoverDOM as DriverPopoverDOM,\n    type State as DriverState,\n    type AllowedButtons,\n    type DriveStep,\n    type DriverHook,\n} from 'driver.js';\nimport 'driver.js/dist/driver.css';\n\n// Features:\n// [x] - Close on click outside\n// [x] - Multiple steps with backdrop\n// [x] - drive vs. highlight\n// [x] - allow for controlling state (setStep, etc)\n// [-] - Single step to replace OnboardingTip (no buttons except close), no backdrop\n// [-] - Styling - as driver.js is using a singleton, setting styles for another onboarding step will override the global styles\n\nexport type PopoverDOM = DriverPopoverDOM;\nexport type OnboardingState = DriverState;\n\ntype DriverCallbackOptions = Parameters<DriverHook>[2];\n\n/**\n * Describes a single step in an Onboarding Tour.\n *\n * Is based on the underlying {@link DriveStep driver.js step configuration object}.\n *\n * @see https://driverjs.com/docs/configuration\n */\nexport type OnboardingStep = DriveStep & {\n    /**\n     * The target element to highlight.\n     *\n     * This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want\n     * to go with a selector as it's the easiest one to implement).\n     *\n     * If this is a selector, the first matching element will be highlighted.\n     *\n     * If no element is given, the popover will simply be centered on the screen.\n     *\n     * @example '[data-onboarding-walkthrough-step=\"2\"]'\n     */\n    element?: string | Element;\n\n    /**\n     * Defines the content and appearance of the popover.\n     */\n    popover: {\n        /**\n         * Title text to be shown.\n         *\n         * You can use HTML here, but maybe you shouldn't.\n         */\n        title?: string;\n\n        /**\n         * Description text to be shown.\n         *\n         * You can use HTML here, but maybe you shouldn't.\n         */\n        description?: string;\n\n        /**\n         * The position of the popover relative to the target element.\n         *\n         * @default 'left'\n         */\n        side?: 'top' | 'right' | 'bottom' | 'left' | 'over';\n\n        /**\n         * Where the popover is anchored to the target element.\n         *\n         * @default 'start'\n         */\n        align?: 'start' | 'center' | 'end';\n\n        /**\n         * The buttons that should be shown in the popover - for this step only.\n         *\n         * When highlighting a single element (there is just a single step), there are no buttons by default. When\n         * showing a step of a multi-step tour, all buttons are shown by default.\n         *\n         * The \"close\" button is a simple \"X\" in the popover.\n         * The \"previous\" and \"next\" buttons are actual text buttons. can define the text contents of those buttons via\n         * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.\n         *\n         * This overrides the showButtons array on the {@link OnboardingOptions}.\n         */\n        showButtons?: AllowedButtons[];\n\n        /**\n         * The buttons that should be disabled in the popover - for this step only.\n         *\n         * This is useful when you want to show some of the buttons, but disable them anyway.\n         *\n         * This overrides the disableButtons array on the {@link OnboardingOptions}.\n         */\n        disableButtons?: AllowedButtons[];\n\n        /**\n         * Whether to disable interaction with the highlighted element.\n         *\n         * @default false\n         */\n        disableActiveInteraction?: boolean;\n\n        /**\n         * Custom class to add to the popover element.\n         *\n         * This can be used to style the popover.\n         */\n        popoverClass?: string;\n\n        /**\n         * Text to use for the \"previous\" button - specific for this step only.\n         *\n         * This overrides the prevBtnText on the {@link OnboardingOptions}.\n         */\n        prevBtnText?: string;\n\n        /**\n         * Text to use for the \"next\" button - specific for this step only.\n         *\n         * This overrides the nextBtnText on the {@link OnboardingOptions}.\n         */\n        nextBtnText?: string;\n\n        /**\n         * Text to use for the \"done\" (a.k.a. the final \"next\") button - specific for this step only.\n         *\n         * This overrides the doneBtnText on the {@link OnboardingOptions}.\n         */\n        doneBtnText?: string;\n    };\n\n    /**\n     * Callback triggered when the highlighting is about to become visible.\n     *\n     * @param element The target DOM element of the step.\n     * @param step The {@link DriveStep driver.js step object} configured for the step.\n     * @param opts The configuration options and current state of the driver object as well as the driver object itself.\n     */\n    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;\n\n    /**\n     * Callback triggered when the highlight is visible.\n     *\n     * @param element The target DOM element of the step.\n     * @param step The {@link DriveStep driver.js step object} configured for the step.\n     * @param opts The configuration options and current state of the driver object as well as the driver object itself.\n     */\n    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;\n\n    /**\n     * Callback triggered when the highlight is about to become invisible.\n     *\n     * @param element The target DOM element of the step.\n     * @param step The {@link DriveStep driver.js step object} configured for the step.\n     * @param opts The configuration options and current state of the driver object as well as the driver object itself.\n     */\n    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;\n};\n\ntype OnboardingOptions = {\n    /**\n     * Array of steps to highlight.\n     *\n     * You should pass this when you want to set up a tour.\n     */\n    steps?: OnboardingStep[];\n\n    /**\n     * The buttons that should be shown in popovers.\n     *\n     * When highlighting a single element (there is just a single step), there are no buttons by default. When showing\n     * a step of a multi-step tour, all buttons are shown by default.\n     *\n     * The \"close\" button is a simple \"X\" in the popover.\n     * The \"previous\" and \"next\" buttons are actual text buttons. can define the text contents of those buttons via\n     * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.\n     */\n    showButtons?: AllowedButtons[];\n\n    /**\n     * The buttons that should be disabled in popovers.\n     *\n     * This is useful when you want to show some of the buttons, but disable them anyway.\n     */\n    disableButtons?: AllowedButtons[];\n\n    /**\n     * Text to use for the \"previous\" button.\n     *\n     * @default 'Previous'\n     */\n    prevBtnText?: string;\n\n    /**\n     * Text to use for the \"next\" button.\n     *\n     * @default 'Next'\n     */\n    nextBtnText?: string;\n\n    /**\n     * Text to use for the \"done\" (a.k.a. the final \"next\") button.\n     *\n     * When given, this overrides the {@link nextBtnText} in the final popover of a tour.\n     *\n     * @default 'Done'\n     */\n    doneBtnText?: string;\n\n    /**\n     * Indicates whether to show progress in the onboarding popover.\n     *\n     * @default true\n     */\n    showProgress?: boolean;\n\n    /**\n     * Whether to allow closing the popover by clicking on the backdrop.\n     *\n     * This should be disabled during a tour to ensure the user completes the tour, but can be enabled on the last step.\n     *\n     * @default false\n     */\n    allowClose?: boolean;\n\n    /**\n     * Distance between the highlighted element and the cutout.\n     *\n     * @default 10\n     */\n    stagePadding?: number;\n\n    /**\n     * Radius of the cutout around the highlighted element.\n     *\n     * @default 5\n     */\n    stageRadius?: number;\n\n    /**\n     * Whether to allow keyboard navigation.\n     *\n     * @default true\n     */\n    allowKeyboardControl?: boolean;\n\n    /**\n     * Whether to disable interaction with the highlighted element.\n     * Can be configured at the step level as well.\n     *\n     * @default false\n     */\n    disableActiveInteraction?: boolean;\n\n    /**\n     * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity\n     * and the close on the backdrop is disabled.\n     *\n     * @default false\n     */\n    noBackdrop?: boolean;\n\n    /**\n     * Additional classes set on the popover itself.\n     */\n    popoverClass?: string;\n\n    /**\n     * Callback triggered when an onboarding popover renders.\n     *\n     * @param element The target DOM element of the step.\n     * @param opts The configuration options and current state of the driver object as well as the driver object itself.\n     */\n    onPopoverRender?: (popover: PopoverDOM, opts: OnboardingState) => void;\n\n    /**\n     * Callback triggered when the onboarding tour is destroyed.\n     */\n    onDestroyed?: () => void;\n};\n\nexport const useOnboardingTour = (params: OnboardingOptions) => {\n    const {\n        steps,\n        prevBtnText = 'Previous',\n        nextBtnText = 'Next',\n        doneBtnText = 'Done',\n        showProgress = true,\n        allowClose = false,\n        stagePadding = 10,\n        stageRadius = 5,\n        allowKeyboardControl = true,\n        showButtons,\n        disableButtons,\n        popoverClass,\n        noBackdrop = false,\n        onPopoverRender = () => {},\n        onDestroyed = () => {},\n        ...driverProps\n    } = params;\n\n    const handlePopoverRender = (popover: DriverPopoverDOM, options: DriverCallbackOptions) => {\n        onPopoverRender(popover, options.state);\n    };\n\n    const handleDestroyed = () => {\n        onDestroyed();\n    };\n\n    const isSingleStep = !steps || steps.length === 1;\n\n    // This configuration is applied to all steps.\n    // Driver.js allows also for individual customization for single steps too.\n    const driverInstance = driver({\n        steps,\n        prevBtnText,\n        nextBtnText,\n        doneBtnText,\n        showProgress: isSingleStep ? false : showProgress,\n        showButtons: isSingleStep ? (['close'] as AllowedButtons[]) : showButtons,\n        allowClose,\n        overlayOpacity: noBackdrop ? 0 : 0.5,\n        disableButtons,\n        progressText: '{{current}} / {{total}}',\n        overlayColor: 'var(--color-black)',\n        stagePadding,\n        stageRadius,\n        allowKeyboardControl,\n        popoverClass,\n        onPopoverRender: handlePopoverRender,\n        onDestroyed: handleDestroyed,\n        ...driverProps,\n    });\n\n    return {\n        // Use for onboarding tours. Pass in all steps as \"steps\" parameter for initial configuration.\n        run: () => driverInstance.drive(),\n\n        // Use for single element highlights -> see useOnboardingTip\n        // highlight: (step: OnboardingStep) => driverInstance.highlight(step),\n\n        // Cleanup the onboarding\n        destroy: () => driverInstance.destroy(),\n\n        // Gets the current state of the onboarding with the current step\n        onboardingState: () => driverInstance.getState(),\n\n        // Recalculate and redraw the highlight\n        refresh: () => driverInstance.refresh(),\n\n        // Is the tour or highlight currently active\n        isActive: () => driverInstance.isActive(),\n\n        // Move to the next step\n        moveNext: () => driverInstance.moveNext(),\n\n        // Move to the previous step\n        movePrevious: () => driverInstance.movePrevious(),\n\n        // Move to the step 4\n        moveTo: (stepNumber: number) => driverInstance.moveTo(stepNumber),\n\n        // Is there a next step\n        hasNextStep: () => driverInstance.hasNextStep(),\n\n        // Is there a previous step\n        hasPreviousStep: () => driverInstance.hasPreviousStep(),\n\n        // Is the current step the first step\n        isFirstStep: () => driverInstance.isFirstStep(),\n\n        // Is the current step the last step\n        isLastStep: () => driverInstance.isLastStep(),\n\n        // Gets the active step index\n        getActiveIndex: () => driverInstance.getActiveIndex(),\n    };\n};\n\ntype OnboardingTipOptions = {\n    allowClose?: boolean;\n    stagePadding?: number;\n    stageRadius?: number;\n    noBackdrop?: boolean;\n};\n\n/**\n * Note: please use the {@link import('../components/onboarding/OnboardingTip')#default OnboardingTip} instead of this\n * hook!\n *\n * This is kept only for future development of driver.js with the hope to solve the global driver styling issue and to\n * eventually replace the OnboardingTooltip also with driver.js.\n *\n * @experimental\n */\nexport const useOnboardingTip = (options?: OnboardingTipOptions) => {\n    const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};\n\n    const driverInstance = driver({\n        allowClose,\n        stagePadding,\n        stageRadius,\n        overlayOpacity: noBackdrop ? 0 : 0.5,\n        overlayColor: undefined,\n    });\n\n    return {\n        highlight: (step: OnboardingStep) => driverInstance.highlight(step),\n        destroy: () => driverInstance.destroy(),\n        refresh: () => driverInstance.refresh(),\n        isActive: () => driverInstance.isActive(),\n    };\n};\n"],"names":["useOnboardingTour","params","steps","prevBtnText","nextBtnText","doneBtnText","showProgress","allowClose","stagePadding","stageRadius","allowKeyboardControl","showButtons","disableButtons","popoverClass","noBackdrop","onPopoverRender","onDestroyed","driverProps","handlePopoverRender","popover","options","handleDestroyed","isSingleStep","driverInstance","driver","stepNumber","useOnboardingTip","step"],"mappings":";;AA8RO,MAAMA,IAAoB,CAACC,MAA8B;AAC5D,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,YAAAC,IAAa;AAAA,IACb,cAAAC,IAAe;AAAA,IACf,aAAAC,IAAc;AAAA,IACd,sBAAAC,IAAuB;AAAA,IACvB,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,aAAAC,IAAc,MAAM;AAAA,IAAC;AAAA,IACrB,GAAGC;AAAA,EAAA,IACHhB,GAEEiB,IAAsB,CAACC,GAA2BC,MAAmC;AACvF,IAAAL,EAAgBI,GAASC,EAAQ,KAAK;AAAA,EAC1C,GAEMC,IAAkB,MAAM;AAC1B,IAAAL,EAAA;AAAA,EACJ,GAEMM,IAAe,CAACpB,KAASA,EAAM,WAAW,GAI1CqB,IAAiBC,EAAO;AAAA,IAC1B,OAAAtB;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAciB,IAAe,KAAQhB;AAAA,IACrC,aAAagB,IAAgB,CAAC,OAAO,IAAyBX;AAAA,IAC9D,YAAAJ;AAAA,IACA,gBAAgBO,IAAa,IAAI;AAAA,IACjC,gBAAAF;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAAJ;AAAA,IACA,aAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAG;AAAA,IACA,iBAAiBK;AAAA,IACjB,aAAaG;AAAA,IACb,GAAGJ;AAAA,EAAA,CACN;AAED,SAAO;AAAA;AAAA,IAEH,KAAK,MAAMM,EAAe,MAAA;AAAA;AAAA;AAAA;AAAA,IAM1B,SAAS,MAAMA,EAAe,QAAA;AAAA;AAAA,IAG9B,iBAAiB,MAAMA,EAAe,SAAA;AAAA;AAAA,IAGtC,SAAS,MAAMA,EAAe,QAAA;AAAA;AAAA,IAG9B,UAAU,MAAMA,EAAe,SAAA;AAAA;AAAA,IAG/B,UAAU,MAAMA,EAAe,SAAA;AAAA;AAAA,IAG/B,cAAc,MAAMA,EAAe,aAAA;AAAA;AAAA,IAGnC,QAAQ,CAACE,MAAuBF,EAAe,OAAOE,CAAU;AAAA;AAAA,IAGhE,aAAa,MAAMF,EAAe,YAAA;AAAA;AAAA,IAGlC,iBAAiB,MAAMA,EAAe,gBAAA;AAAA;AAAA,IAGtC,aAAa,MAAMA,EAAe,YAAA;AAAA;AAAA,IAGlC,YAAY,MAAMA,EAAe,WAAA;AAAA;AAAA,IAGjC,gBAAgB,MAAMA,EAAe,eAAA;AAAA,EAAe;AAE5D,GAkBaG,IAAmB,CAACN,MAAmC;AAChE,QAAM,EAAE,YAAAb,IAAa,IAAM,cAAAC,IAAe,GAAG,aAAAC,IAAc,GAAG,YAAAK,IAAa,GAAA,IAASM,KAAW,CAAA,GAEzFG,IAAiBC,EAAO;AAAA,IAC1B,YAAAjB;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAgBK,IAAa,IAAI;AAAA,IACjC,cAAc;AAAA,EAAA,CACjB;AAED,SAAO;AAAA,IACH,WAAW,CAACa,MAAyBJ,EAAe,UAAUI,CAAI;AAAA,IAClE,SAAS,MAAMJ,EAAe,QAAA;AAAA,IAC9B,SAAS,MAAMA,EAAe,QAAA;AAAA,IAC9B,UAAU,MAAMA,EAAe,SAAA;AAAA,EAAS;AAEhD;"}

package/hooks/useOnlineStatus.js

@@ -1,15 +1,10 @@
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
-import { useState } from 'react';
-import useEvent from "./useEvent.js";
-/**
- * Custom hook to track online/offline status of the browser.
- *
- * @returns Returns true if the browser is online, otherwise false.
- */
-const useOnlineStatus = () => {
-    const [online, setOnline] = useState(navigator.onLine);
-    useEvent('online', () => setOnline(navigator.onLine), false, window);
-    useEvent('offline', () => setOnline(navigator.onLine), false, window);
-    return online;
+import { useState as t } from "react";
+import e from "./useEvent.js";
+const r = () => {
+  const [o, n] = t(navigator.onLine);
+  return e("online", () => n(navigator.onLine), !1, window), e("offline", () => n(navigator.onLine), !1, window), o;
 };
-export default useOnlineStatus;
+export {
+  r as default
+};
+//# sourceMappingURL=useOnlineStatus.js.map

package/hooks/useOnlineStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnlineStatus.js","sources":["../../src/hooks/useOnlineStatus.ts"],"sourcesContent":["// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js\nimport { useState } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * Custom hook to track online/offline status of the browser.\n *\n * @returns Returns true if the browser is online, otherwise false.\n */\nconst useOnlineStatus = (): boolean => {\n    const [online, setOnline] = useState(navigator.onLine);\n\n    useEvent('online', () => setOnline(navigator.onLine), false, window);\n    useEvent('offline', () => setOnline(navigator.onLine), false, window);\n\n    return online;\n};\n\nexport default useOnlineStatus;\n"],"names":["useOnlineStatus","online","setOnline","useState","useEvent"],"mappings":";;AAUA,MAAMA,IAAkB,MAAe;AACnC,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,UAAU,MAAM;AAErD,SAAAC,EAAS,UAAU,MAAMF,EAAU,UAAU,MAAM,GAAG,IAAO,MAAM,GACnEE,EAAS,WAAW,MAAMF,EAAU,UAAU,MAAM,GAAG,IAAO,MAAM,GAE7DD;AACX;"}

package/hooks/usePopperDropdown.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 type UsePopperDropdownResult = {
     isOpen: boolean;
     open: () => void;

package/hooks/usePopperDropdown.js

@@ -1,24 +1,21 @@
-import { useRef, useState } from 'react';
-import { usePopper } from 'react-popper';
-const usePopperDropdown = ({ placement = 'bottom-start' } = {}) => {
-    const referenceRef = useRef(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const popper = usePopper(referenceRef.current, popperElement, {
-        placement,
-    });
-    const open = () => setIsOpen(true);
-    const close = () => setIsOpen(false);
-    const toggle = () => setIsOpen(prev => !prev);
-    return {
-        isOpen,
-        open,
-        close,
-        toggle,
-        referenceRef,
-        popperElementRef: setPopperElement,
-        popperStyles: popper.styles.popper,
-        popperAttributes: popper.attributes.popper,
-    };
+import { useRef as u, useState as o } from "react";
+import { usePopper as f } from "react-popper";
+const E = ({ placement: s = "bottom-start" } = {}) => {
+  const t = u(null), [r, n] = o(null), [l, e] = o(!1), p = f(t.current, r, {
+    placement: s
+  });
+  return {
+    isOpen: l,
+    open: () => e(!0),
+    close: () => e(!1),
+    toggle: () => e((c) => !c),
+    referenceRef: t,
+    popperElementRef: n,
+    popperStyles: p.styles.popper,
+    popperAttributes: p.attributes.popper
+  };
 };
-export default usePopperDropdown;
+export {
+  E as default
+};
+//# sourceMappingURL=usePopperDropdown.js.map

package/hooks/usePopperDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopperDropdown.js","sources":["../../src/hooks/usePopperDropdown.ts"],"sourcesContent":["import { type CSSProperties, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\ntype UsePopperDropdownResult = {\n    isOpen: boolean;\n    open: () => void;\n    close: () => void;\n    toggle: () => void;\n    referenceRef: any;\n    popperElementRef: (el: HTMLElement | null) => void;\n    popperStyles: CSSProperties;\n    popperAttributes: Record<string, any>;\n};\n\ntype UsePopperDropdownParams = {\n    placement?: 'bottom-start' | 'bottom-end';\n};\n\nconst usePopperDropdown = ({ placement = 'bottom-start' }: UsePopperDropdownParams = {}) => {\n    const referenceRef = useRef<HTMLElement>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n    const [isOpen, setIsOpen] = useState(false);\n\n    const popper = usePopper(referenceRef.current, popperElement, {\n        placement,\n    });\n\n    const open = () => setIsOpen(true);\n    const close = () => setIsOpen(false);\n    const toggle = () => setIsOpen(prev => !prev);\n\n    return {\n        isOpen,\n        open,\n        close,\n        toggle,\n        referenceRef,\n        popperElementRef: setPopperElement,\n        popperStyles: popper.styles.popper,\n        popperAttributes: popper.attributes.popper,\n    } as UsePopperDropdownResult;\n};\n\nexport default usePopperDropdown;\n"],"names":["usePopperDropdown","placement","referenceRef","useRef","popperElement","setPopperElement","useState","isOpen","setIsOpen","popper","usePopper","prev"],"mappings":";;AAkBA,MAAMA,IAAoB,CAAC,EAAE,WAAAC,IAAY,eAAA,IAA4C,CAAA,MAAO;AACxF,QAAMC,IAAeC,EAAoB,IAAI,GACvC,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI,GACrE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAASC,EAAUR,EAAa,SAASE,GAAe;AAAA,IAC1D,WAAAH;AAAA,EAAA,CACH;AAMD,SAAO;AAAA,IACH,QAAAM;AAAA,IACA,MANS,MAAMC,EAAU,EAAI;AAAA,IAO7B,OANU,MAAMA,EAAU,EAAK;AAAA,IAO/B,QANW,MAAMA,EAAU,CAAAG,MAAQ,CAACA,CAAI;AAAA,IAOxC,cAAAT;AAAA,IACA,kBAAkBG;AAAA,IAClB,cAAcI,EAAO,OAAO;AAAA,IAC5B,kBAAkBA,EAAO,WAAW;AAAA,EAAA;AAE5C;"}

package/hooks/usePostMessage.js

@@ -1,48 +1,29 @@
-import { useEffect } from 'react';
-import { isEmpty, noop } from 'es-toolkit/compat';
-/**
- * A custom hook to ease the exchange of postMessage events between iframes and the parent window.
- *
- * @param messagePrefix a custom prefix to limit the event listener for these events
- * @param onReceiveMessage a callback function triggered when a message is received
- * @returns
- */
-const usePostMessage = (messagePrefix, onReceiveMessage) => {
-    const sendMessageToParent = (message) => {
-        const referrer = document.referrer;
-        if (referrer) {
-            window.parent.postMessage(message, referrer);
-        }
-    };
-    const sendMessageToWidget = (message, targetFrames) => {
-        if (!targetFrames || isEmpty(targetFrames)) {
-            return;
-        }
-        const frames = Array.isArray(targetFrames) ? [...targetFrames] : [targetFrames];
-        [...frames].forEach(target => {
-            const contentWindow = target.contentWindow;
-            if (contentWindow) {
-                contentWindow.postMessage(message, '*');
-            }
-        });
-    };
-    const receiveMessage = (event, callback) => {
-        const actionType = event.data.type;
-        if (!actionType) {
-            return;
-        }
-        if (actionType.startsWith(messagePrefix)) {
-            callback(event.data);
-        }
-    };
-    useEffect(() => {
-        const listenerCallback = (event) => receiveMessage(event, onReceiveMessage || noop);
-        window.addEventListener('message', listenerCallback, false);
-        return () => window.removeEventListener('message', listenerCallback, false);
-    }, []);
-    return {
-        sendMessageToParent,
-        sendMessageToWidget,
-    };
+import { useEffect as d } from "react";
+import { isEmpty as p, noop as u } from "es-toolkit/compat";
+const l = (o, r) => {
+  const i = (s) => {
+    const e = document.referrer;
+    e && window.parent.postMessage(s, e);
+  }, a = (s, e) => {
+    if (!e || p(e))
+      return;
+    [...Array.isArray(e) ? [...e] : [e]].forEach((f) => {
+      const t = f.contentWindow;
+      t && t.postMessage(s, "*");
+    });
+  }, c = (s, e) => {
+    const n = s.data.type;
+    n && n.startsWith(o) && e(s.data);
+  };
+  return d(() => {
+    const s = (e) => c(e, r || u);
+    return window.addEventListener("message", s, !1), () => window.removeEventListener("message", s, !1);
+  }, []), {
+    sendMessageToParent: i,
+    sendMessageToWidget: a
+  };
 };
-export default usePostMessage;
+export {
+  l as default
+};
+//# sourceMappingURL=usePostMessage.js.map

package/hooks/usePostMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePostMessage.js","sources":["../../src/hooks/usePostMessage.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nexport type RemoteAction = {\n    /**\n     * The RemoteAction is inspired by a plain redux action where the type is the\n     * action identifier.\n     *\n     * @example\n     *\n     * ```json\n     * {\n     *      \"type\": \"EVENT_SET_VISIBLE_WIDGETS\",\n     *      \"payload\": [\"foo\", \"bar\"],\n     * }\n     * ```\n     */\n    type: string;\n\n    /**\n     * The action payload itself.\n     */\n    payload: any;\n};\n\n/**\n * A custom hook to ease the exchange of postMessage events between iframes and the parent window.\n *\n * @param messagePrefix a custom prefix to limit the event listener for these events\n * @param onReceiveMessage a callback function triggered when a message is received\n * @returns\n */\nconst usePostMessage = (messagePrefix: string, onReceiveMessage?: (eventData: any) => void) => {\n    const sendMessageToParent = (message: RemoteAction) => {\n        const referrer = document.referrer;\n        if (referrer) {\n            window.parent.postMessage(message, referrer);\n        }\n    };\n\n    const sendMessageToWidget = (message: RemoteAction, targetFrames: HTMLIFrameElement | HTMLIFrameElement[]) => {\n        if (!targetFrames || isEmpty(targetFrames)) {\n            return;\n        }\n\n        const frames = Array.isArray(targetFrames) ? [...targetFrames] : [targetFrames];\n\n        [...frames].forEach(target => {\n            const contentWindow = target.contentWindow;\n            if (contentWindow) {\n                contentWindow.postMessage(message, '*');\n            }\n        });\n    };\n\n    const receiveMessage = (event: MessageEvent, callback: (eventData: any) => void) => {\n        const actionType = event.data.type;\n        if (!actionType) {\n            return;\n        }\n\n        if (actionType.startsWith(messagePrefix)) {\n            callback(event.data);\n        }\n    };\n\n    useEffect(() => {\n        const listenerCallback = (event: MessageEvent) => receiveMessage(event, onReceiveMessage || noop);\n        window.addEventListener('message', listenerCallback, false);\n        return () => window.removeEventListener('message', listenerCallback, false);\n    }, []);\n\n    return {\n        sendMessageToParent,\n        sendMessageToWidget,\n    };\n};\n\nexport default usePostMessage;\n"],"names":["usePostMessage","messagePrefix","onReceiveMessage","sendMessageToParent","message","referrer","sendMessageToWidget","targetFrames","isEmpty","target","contentWindow","receiveMessage","event","callback","actionType","useEffect","listenerCallback","noop"],"mappings":";;AAgCA,MAAMA,IAAiB,CAACC,GAAuBC,MAAgD;AAC3F,QAAMC,IAAsB,CAACC,MAA0B;AACnD,UAAMC,IAAW,SAAS;AAC1B,IAAIA,KACA,OAAO,OAAO,YAAYD,GAASC,CAAQ;AAAA,EAEnD,GAEMC,IAAsB,CAACF,GAAuBG,MAA0D;AAC1G,QAAI,CAACA,KAAgBC,EAAQD,CAAY;AACrC;AAKJ,KAAC,GAFc,MAAM,QAAQA,CAAY,IAAI,CAAC,GAAGA,CAAY,IAAI,CAACA,CAAY,CAEpE,EAAE,QAAQ,CAAAE,MAAU;AAC1B,YAAMC,IAAgBD,EAAO;AAC7B,MAAIC,KACAA,EAAc,YAAYN,GAAS,GAAG;AAAA,IAE9C,CAAC;AAAA,EACL,GAEMO,IAAiB,CAACC,GAAqBC,MAAuC;AAChF,UAAMC,IAAaF,EAAM,KAAK;AAC9B,IAAKE,KAIDA,EAAW,WAAWb,CAAa,KACnCY,EAASD,EAAM,IAAI;AAAA,EAE3B;AAEA,SAAAG,EAAU,MAAM;AACZ,UAAMC,IAAmB,CAACJ,MAAwBD,EAAeC,GAAOV,KAAoBe,CAAI;AAChG,kBAAO,iBAAiB,WAAWD,GAAkB,EAAK,GACnD,MAAM,OAAO,oBAAoB,WAAWA,GAAkB,EAAK;AAAA,EAC9E,GAAG,CAAA,CAAE,GAEE;AAAA,IACH,qBAAAb;AAAA,IACA,qBAAAG;AAAA,EAAA;AAER;"}

package/hooks/usePostMessageSender.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Provides helper functions to allow sending {@link postMessage} events.
+ */
+declare const usePostMessageSender: () => {
+    sendMessage: (message: unknown, targetWindow: WindowProxy | null | undefined, targetOrigin?: string) => void;
+    sendMessageToParent: (message: unknown, targetOrigin?: string) => void;
+    sendMessageToTop: (message: unknown, targetOrigin?: string) => void;
+    sendMessageToAllIframes: (message: unknown, targetOrigin?: string) => void;
+};
+export default usePostMessageSender;