@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/hooks/useOnboarding.d.ts

@@ -0,0 +1,274 @@
+import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons, type DriveStep, type DriverHook } from 'driver.js';
+import 'driver.js/dist/driver.css';
+export type PopoverDOM = DriverPopoverDOM;
+export type OnboardingState = DriverState;
+type DriverCallbackOptions = Parameters<DriverHook>[2];
+/**
+ * Describes a single step in an Onboarding Tour.
+ *
+ * Is based on the underlying {@link DriveStep driver.js step configuration object}.
+ *
+ * @see https://driverjs.com/docs/configuration
+ */
+export type OnboardingStep = DriveStep & {
+    /**
+     * The target element to highlight.
+     *
+     * This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want
+     * to go with a selector as it's the easiest one to implement).
+     *
+     * If this is a selector, the first matching element will be highlighted.
+     *
+     * If no element is given, the popover will simply be centered on the screen.
+     *
+     * @example '[data-onboarding-walkthrough-step="2"]'
+     */
+    element?: string | Element;
+    /**
+     * Defines the content and appearance of the popover.
+     */
+    popover: {
+        /**
+         * Title text to be shown.
+         *
+         * You can use HTML here, but maybe you shouldn't.
+         */
+        title?: string;
+        /**
+         * Description text to be shown.
+         *
+         * You can use HTML here, but maybe you shouldn't.
+         */
+        description?: string;
+        /**
+         * The position of the popover relative to the target element.
+         *
+         * @default 'left'
+         */
+        side?: 'top' | 'right' | 'bottom' | 'left' | 'over';
+        /**
+         * Where the popover is anchored to the target element.
+         *
+         * @default 'start'
+         */
+        align?: 'start' | 'center' | 'end';
+        /**
+         * The buttons that should be shown in the popover - for this step only.
+         *
+         * When highlighting a single element (there is just a single step), there are no buttons by default. When
+         * showing a step of a multi-step tour, all buttons are shown by default.
+         *
+         * The "close" button is a simple "X" in the popover.
+         * The "previous" and "next" buttons are actual text buttons. can define the text contents of those buttons via
+         * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
+         *
+         * This overrides the showButtons array on the {@link OnboardingOptions}.
+         */
+        showButtons?: AllowedButtons[];
+        /**
+         * The buttons that should be disabled in the popover - for this step only.
+         *
+         * This is useful when you want to show some of the buttons, but disable them anyway.
+         *
+         * This overrides the disableButtons array on the {@link OnboardingOptions}.
+         */
+        disableButtons?: AllowedButtons[];
+        /**
+         * Whether to disable interaction with the highlighted element.
+         *
+         * @default false
+         */
+        disableActiveInteraction?: boolean;
+        /**
+         * Custom class to add to the popover element.
+         *
+         * This can be used to style the popover.
+         */
+        popoverClass?: string;
+        /**
+         * Text to use for the "previous" button - specific for this step only.
+         *
+         * This overrides the prevBtnText on the {@link OnboardingOptions}.
+         */
+        prevBtnText?: string;
+        /**
+         * Text to use for the "next" button - specific for this step only.
+         *
+         * This overrides the nextBtnText on the {@link OnboardingOptions}.
+         */
+        nextBtnText?: string;
+        /**
+         * Text to use for the "done" (a.k.a. the final "next") button - specific for this step only.
+         *
+         * This overrides the doneBtnText on the {@link OnboardingOptions}.
+         */
+        doneBtnText?: string;
+    };
+    /**
+     * Callback triggered when the highlighting is about to become visible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
+    /**
+     * Callback triggered when the highlight is visible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
+    /**
+     * Callback triggered when the highlight is about to become invisible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
+};
+type OnboardingOptions = {
+    /**
+     * Array of steps to highlight.
+     *
+     * You should pass this when you want to set up a tour.
+     */
+    steps?: OnboardingStep[];
+    /**
+     * The buttons that should be shown in popovers.
+     *
+     * When highlighting a single element (there is just a single step), there are no buttons by default. When showing
+     * a step of a multi-step tour, all buttons are shown by default.
+     *
+     * The "close" button is a simple "X" in the popover.
+     * The "previous" and "next" buttons are actual text buttons. can define the text contents of those buttons via
+     * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
+     */
+    showButtons?: AllowedButtons[];
+    /**
+     * The buttons that should be disabled in popovers.
+     *
+     * This is useful when you want to show some of the buttons, but disable them anyway.
+     */
+    disableButtons?: AllowedButtons[];
+    /**
+     * Text to use for the "previous" button.
+     *
+     * @default 'Previous'
+     */
+    prevBtnText?: string;
+    /**
+     * Text to use for the "next" button.
+     *
+     * @default 'Next'
+     */
+    nextBtnText?: string;
+    /**
+     * Text to use for the "done" (a.k.a. the final "next") button.
+     *
+     * When given, this overrides the {@link nextBtnText} in the final popover of a tour.
+     *
+     * @default 'Done'
+     */
+    doneBtnText?: string;
+    /**
+     * Indicates whether to show progress in the onboarding popover.
+     *
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Whether to allow closing the popover by clicking on the backdrop.
+     *
+     * This should be disabled during a tour to ensure the user completes the tour, but can be enabled on the last step.
+     *
+     * @default false
+     */
+    allowClose?: boolean;
+    /**
+     * Distance between the highlighted element and the cutout.
+     *
+     * @default 10
+     */
+    stagePadding?: number;
+    /**
+     * Radius of the cutout around the highlighted element.
+     *
+     * @default 5
+     */
+    stageRadius?: number;
+    /**
+     * Whether to allow keyboard navigation.
+     *
+     * @default true
+     */
+    allowKeyboardControl?: boolean;
+    /**
+     * Whether to disable interaction with the highlighted element.
+     * Can be configured at the step level as well.
+     *
+     * @default false
+     */
+    disableActiveInteraction?: boolean;
+    /**
+     * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity
+     * and the close on the backdrop is disabled.
+     *
+     * @default false
+     */
+    noBackdrop?: boolean;
+    /**
+     * Additional classes set on the popover itself.
+     */
+    popoverClass?: string;
+    /**
+     * Callback triggered when an onboarding popover renders.
+     *
+     * @param element The target DOM element of the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onPopoverRender?: (popover: PopoverDOM, opts: OnboardingState) => void;
+    /**
+     * Callback triggered when the onboarding tour is destroyed.
+     */
+    onDestroyed?: () => void;
+};
+export declare const useOnboardingTour: (params: OnboardingOptions) => {
+    run: () => void;
+    destroy: () => void;
+    onboardingState: () => any;
+    refresh: () => void;
+    isActive: () => boolean;
+    moveNext: () => void;
+    movePrevious: () => void;
+    moveTo: (stepNumber: number) => void;
+    hasNextStep: () => boolean;
+    hasPreviousStep: () => boolean;
+    isFirstStep: () => boolean;
+    isLastStep: () => boolean;
+    getActiveIndex: () => number | undefined;
+};
+type OnboardingTipOptions = {
+    allowClose?: boolean;
+    stagePadding?: number;
+    stageRadius?: number;
+    noBackdrop?: boolean;
+};
+/**
+ * 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 declare const useOnboardingTip: (options?: OnboardingTipOptions) => {
+    highlight: (step: OnboardingStep) => void;
+    destroy: () => void;
+    refresh: () => void;
+    isActive: () => boolean;
+};
+export {};

package/lib/es/src/hooks/useOnboarding.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboardingTip = exports.useOnboardingTour = void 0;
+const driver_js_1 = require("driver.js");
+require("driver.js/dist/driver.css");
+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 = (0, driver_js_1.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(),
+    };
+};
+exports.useOnboardingTour = useOnboardingTour;
+/**
+ * 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
+ */
+const useOnboardingTip = (options) => {
+    const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};
+    const driverInstance = (0, driver_js_1.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(),
+    };
+};
+exports.useOnboardingTip = useOnboardingTip;

package/lib/es/src/hooks/useOnlineStatus.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Custom hook to track online/offline status of the browser.
+ *
+ * @returns Returns true if the browser is online, otherwise false.
+ */
+declare const useOnlineStatus: () => boolean;
+export default useOnlineStatus;

package/lib/es/src/hooks/useOnlineStatus.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
+const react_1 = require("react");
+const useEvent_1 = tslib_1.__importDefault(require("./useEvent"));
+/**
+ * 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] = (0, react_1.useState)(navigator.onLine);
+    (0, useEvent_1.default)('online', () => setOnline(navigator.onLine), false, window);
+    (0, useEvent_1.default)('offline', () => setOnline(navigator.onLine), false, window);
+    return online;
+};
+exports.default = useOnlineStatus;

package/lib/es/src/hooks/usePopperDropdown.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+type UsePopperDropdownResult = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    referenceRef: any;
+    popperElementRef: (el: HTMLElement | null) => void;
+    popperStyles: CSSProperties;
+    popperAttributes: Record<string, any>;
+};
+type UsePopperDropdownParams = {
+    placement?: 'bottom-start' | 'bottom-end';
+};
+declare const usePopperDropdown: ({ placement }?: UsePopperDropdownParams) => UsePopperDropdownResult;
+export default usePopperDropdown;

package/lib/es/src/hooks/usePopperDropdown.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const react_popper_1 = require("react-popper");
+const usePopperDropdown = ({ placement = 'bottom-start' } = {}) => {
+    const referenceRef = (0, react_1.useRef)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const popper = (0, react_popper_1.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,
+    };
+};
+exports.default = usePopperDropdown;

package/lib/es/src/hooks/usePostMessage.d.ts

@@ -0,0 +1,32 @@
+export type RemoteAction = {
+    /**
+     * The RemoteAction is inspired by a plain redux action where the type is the
+     * action identifier.
+     *
+     * @example
+     *
+     * ```json
+     * {
+     *      "type": "EVENT_SET_VISIBLE_WIDGETS",
+     *      "payload": ["foo", "bar"],
+     * }
+     * ```
+     */
+    type: string;
+    /**
+     * The action payload itself.
+     */
+    payload: any;
+};
+/**
+ * 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
+ */
+declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: (eventData: any) => void) => {
+    sendMessageToParent: (message: RemoteAction) => void;
+    sendMessageToWidget: (message: RemoteAction, targetFrames: HTMLIFrameElement | HTMLIFrameElement[]) => void;
+};
+export default usePostMessage;

package/lib/es/src/hooks/usePostMessage.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+/**
+ * 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 || (0, isEmpty_1.default)(targetFrames)) {
+            return;
+        }
+        const frames = (0, isArray_1.default)(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);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const listenerCallback = (event) => receiveMessage(event, onReceiveMessage || noop_1.default);
+        window.addEventListener('message', listenerCallback, false);
+        return () => window.removeEventListener('message', listenerCallback, false);
+    }, []);
+    return {
+        sendMessageToParent,
+        sendMessageToWidget,
+    };
+};
+exports.default = usePostMessage;

package/lib/es/src/hooks/usePrevious.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The usePrevious hook allows to easily access state from previous component render.
+ * Instead of using a *React.ref* or a *useEffect*, this hook uses a *useState* internally to keep track of the
+ * previous state value.
+ *
+ * Quoting from the React documentation:
+ *
+ * *In most cases, you don’t need this:*
+ *
+ * - *If the value you need can be computed entirely from the current props or other state, remove*
+ * *that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.*
+ * - *If you want to reset the entire component tree’s state, pass a different key to your component.*
+ * - *If you can, update all the relevant state in the event handlers.*
+ *
+ * @link https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ *
+ * @param state The value of the current state to keep track of.
+ * @returns
+ */
+declare const usePrevious: <T>(state: T, isEqualFunc?: ((value: T | null | undefined, current: T | null | undefined) => any) | undefined) => T;
+export default usePrevious;

package/lib/es/src/hooks/usePrevious.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+// Based on the react beta docs, we avoid using an effect here but
+// use another state to store the previous value to compare to.
+// See: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+/**
+ * The usePrevious hook allows to easily access state from previous component render.
+ * Instead of using a *React.ref* or a *useEffect*, this hook uses a *useState* internally to keep track of the
+ * previous state value.
+ *
+ * Quoting from the React documentation:
+ *
+ * *In most cases, you don’t need this:*
+ *
+ * - *If the value you need can be computed entirely from the current props or other state, remove*
+ * *that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.*
+ * - *If you want to reset the entire component tree’s state, pass a different key to your component.*
+ * - *If you can, update all the relevant state in the event handlers.*
+ *
+ * @link https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ *
+ * @param state The value of the current state to keep track of.
+ * @returns
+ */
+const usePrevious = (state, isEqualFunc) => {
+    const ref = (0, react_1.useRef)({ target: state, previous: state });
+    if (isEqualFunc ? !isEqualFunc(state, ref.current.target) : !(0, isEqual_1.default)(state, ref.current.target)) {
+        ref.current.previous = ref.current.target;
+        ref.current.target = state;
+    }
+    return ref.current.previous;
+};
+exports.default = usePrevious;

package/lib/es/src/hooks/useRenderCount.d.ts

@@ -0,0 +1,2 @@
+declare const useRenderCount: () => number;
+export default useRenderCount;

package/lib/es/src/hooks/useRenderCount.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/27-useRenderCount/useRenderCount.js
+const react_1 = require("react");
+const useRenderCount = () => {
+    const count = (0, react_1.useRef)(1);
+    (0, react_1.useEffect)(() => {
+        count.current++;
+    });
+    return count.current;
+};
+exports.default = useRenderCount;

package/lib/es/src/hooks/useResizeObserver.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject } from 'react';
+/**
+ * Custom hook for observing element resize.
+ * @returns
+ */
+declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>() => [MutableRefObject<T | null>, ResizeObserverEntry | null, {
+    blockSize: number | undefined;
+    inlineSize: number | undefined;
+}];
+export default useResizeObserver;

package/lib/es/src/hooks/useResizeObserver.js

@@ -0,0 +1,33 @@
+"use strict";
+// inspired from https://tobbelindstrom.com/blog/resize-observer-hook/
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Custom hook for observing element resize.
+ * @returns
+ */
+const useResizeObserver = () => {
+    const [observerEntry, setObserverEntry] = (0, react_1.useState)(null);
+    const nodeRef = (0, react_1.useRef)(null);
+    const observer = (0, react_1.useRef)(null);
+    const disconnect = (0, react_1.useCallback)(() => observer.current?.disconnect(), []);
+    const observe = (0, react_1.useCallback)(() => {
+        observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
+        if (nodeRef.current) {
+            observer.current.observe(nodeRef.current);
+        }
+    }, [nodeRef]);
+    (0, react_1.useLayoutEffect)(() => {
+        observe();
+        return () => disconnect();
+    }, [disconnect, observe]);
+    return [
+        nodeRef,
+        observerEntry,
+        {
+            blockSize: observerEntry?.borderBoxSize?.at(0)?.blockSize,
+            inlineSize: observerEntry?.borderBoxSize?.at(0)?.inlineSize,
+        },
+    ];
+};
+exports.default = useResizeObserver;

package/lib/es/src/hooks/useScrollPosition.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export type TargetType = Window | Document | HTMLBodyElement | HTMLElement | Element | React.ReactElement | RefObject<HTMLElement>;
+/**
+ * A custom hook that tracks the scroll position of a target element.
+ *
+ * @param target The target element for scroll position tracking.
+ * @returns The current scroll position of the target element.
+ */
+declare const useScrollPosition: (target?: TargetType) => number;
+export default useScrollPosition;