@mediamonks/react-kit 1.0.0-0

package/dist/hooks/useStaticValue/useStaticValue.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+/**
+ * Keep track of a value that is initialized once and then never changes.
+ *
+ * This behavior is similar to `useState`, but the value is never updated.
+ */
+export function useStaticValue(initializeFunction) {
+    // eslint-disable-next-line react/hook-use-state
+    const [value] = useState(initializeFunction);
+    return value;
+}

package/dist/hooks/useToggle/useToggle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Easily toggle value between two states
+ * @param initialValue Whether the toggle should be initially true or false
+ *
+ * @example
+ * ```
+ * const [isActive, toggle] = useToggle(false);
+ * watchEffect(() => {
+ *   console.log('active', isActive);
+ * }
+ * toggle();
+ * toggle(false);
+ * toggle(true);
+ * ```
+ */
+export declare function useToggle(initialValue: boolean): readonly [boolean, (force?: boolean) => void];

package/dist/hooks/useToggle/useToggle.js

@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react';
+/**
+ * Easily toggle value between two states
+ * @param initialValue Whether the toggle should be initially true or false
+ *
+ * @example
+ * ```
+ * const [isActive, toggle] = useToggle(false);
+ * watchEffect(() => {
+ *   console.log('active', isActive);
+ * }
+ * toggle();
+ * toggle(false);
+ * toggle(true);
+ * ```
+ */
+export function useToggle(initialValue) {
+    const [state, setState] = useState(initialValue);
+    const toggle = useCallback((force) => {
+        setState((oldValue) => (force === undefined ? !oldValue : force));
+    }, [setState]);
+    return [state, toggle];
+}

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+export * from './components/AutoFill/AutoFill.js';
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';
+export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
+export * from './hooks/useClientSideValue/useClientSideValue.js';
+export * from './hooks/useEventListener/useEventListener.js';
+export * from './hooks/useForceRerender/useForceRerender.js';
+export * from './hooks/useHasFocus/useHasFocus.js';
+export * from './hooks/useIntersectionObserver/useIntersectionObserver.js';
+export * from './hooks/useInterval/useInterval.js';
+export * from './hooks/useMediaDuration/useMediaDuration.js';
+export * from './hooks/useMediaQuery/useMediaQuery.js';
+export * from './hooks/useMutationObserver/useMutationObserver.js';
+export * from './hooks/useRafCallback/useRafCallback.js';
+export * from './hooks/useRefValue/useRefValue.js';
+export * from './hooks/useRefs/useRefs.js';
+export * from './hooks/useRefs/useRefs.types.js';
+export * from './hooks/useRefs/utils/assertAndUnwrapRefs/assertAndUnwrapRefs.js';
+export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.js';
+export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.types.js';
+export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs.js';
+export * from './hooks/useResizeObserver/useResizeObserver.js';
+export * from './hooks/useStaticValue/useStaticValue.js';
+export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
+export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
+export * from './lifecycle/hooks/useMount/useMount.js';
+export * from './lifecycle/hooks/useUnmount/useUnmount.js';
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './utils/arrayRef/arrayRef.js';
+export * from './utils/createTimeout/createTimeout.js';
+export * from './utils/isRefObject/isRefObject.js';
+export * from './utils/unref/unref.js';
+export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
+export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
+export { useBeforeUnmount, type BeforeUnmountCallback, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/index.js

@@ -0,0 +1,46 @@
+/* PLOP_ADD_EXPORT */
+export * from './components/AutoFill/AutoFill.js';
+export * from './gsap/components/SplitTextWrapper/SplitTextWrapper.js';
+export * from './gsap/hooks/useAnimation/useAnimation.js';
+export * from './gsap/hooks/useExposeAnimation/useExposeAnimation.js';
+export * from './gsap/hooks/useExposedAnimation/useExposedAnimation.js';
+export * from './gsap/hooks/useExposedAnimations/useExposedAnimations.js';
+export * from './gsap/hooks/useFlip/useFlip.js';
+export * from './gsap/hooks/useScrollAnimation/useScrollAnimation.js';
+export * from './gsap/utils/getAnimation/getAnimation.js';
+export * from './hocs/ensuredForwardRef/ensuredForwardRef.js';
+export * from './hooks/useClientSideValue/useClientSideValue.js';
+export * from './hooks/useEventListener/useEventListener.js';
+export * from './hooks/useForceRerender/useForceRerender.js';
+export * from './hooks/useHasFocus/useHasFocus.js';
+export * from './hooks/useIntersectionObserver/useIntersectionObserver.js';
+export * from './hooks/useInterval/useInterval.js';
+export * from './hooks/useMediaDuration/useMediaDuration.js';
+export * from './hooks/useMediaQuery/useMediaQuery.js';
+export * from './hooks/useMutationObserver/useMutationObserver.js';
+export * from './hooks/useRafCallback/useRafCallback.js';
+export * from './hooks/useRefValue/useRefValue.js';
+export * from './hooks/useRefs/useRefs.js';
+export * from './hooks/useRefs/useRefs.types.js';
+export * from './hooks/useRefs/utils/assertAndUnwrapRefs/assertAndUnwrapRefs.js';
+export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.js';
+export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.types.js';
+export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs.js';
+export * from './hooks/useResizeObserver/useResizeObserver.js';
+export * from './hooks/useStaticValue/useStaticValue.js';
+export * from './hooks/useToggle/useToggle.js';
+export * from './lifecycle/hooks/useBeforeMount/useBeforeMount.js';
+export * from './lifecycle/hooks/useIsMounted/useIsMounted.js';
+export * from './lifecycle/hooks/useIsMountedState/useIsMountedState.js';
+export * from './lifecycle/hooks/useMount/useMount.js';
+export * from './lifecycle/hooks/useUnmount/useUnmount.js';
+export * from './nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export * from './utils/arrayRef/arrayRef.js';
+export * from './utils/createTimeout/createTimeout.js';
+export * from './utils/isRefObject/isRefObject.js';
+export * from './utils/unref/unref.js';
+// Custom exports for external use only
+export { CrossFlow } from './lifecycle/components/CrossFlow/CrossFlow.js';
+export { TransitionPresenceContext } from './lifecycle/components/TransitionPresence/TransitionPresence.context.js';
+export { TransitionPresence } from './lifecycle/components/TransitionPresence/TransitionPresence.js';
+export { useBeforeUnmount, } from './lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js';

package/dist/lifecycle/components/CrossFlow/CrossFlow.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type TransitionPresenceProps } from '../TransitionPresence/TransitionPresence.js';
+export declare function CrossFlow({ children, onChildrenMounted, ...props }: TransitionPresenceProps): ReactElement;

package/dist/lifecycle/components/CrossFlow/CrossFlow.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { childrenAreEqual } from '../../../_utils/childrenAreEqual.js';
+import { getId } from '../../../_utils/getId.js';
+import { useIsMounted } from '../../hooks/useIsMounted/useIsMounted.js';
+import { TransitionPresence, } from '../TransitionPresence/TransitionPresence.js';
+export function CrossFlow({ children, onChildrenMounted, ...props }) {
+    const previousChildren = useRef(children);
+    const [queue, setQueue] = useState(() => children === null
+        ? {}
+        : {
+            [getId()]: children,
+        });
+    const isMounted = useIsMounted();
+    useEffect(() => {
+        // Don't do anything during the first render
+        if (!isMounted.current) {
+            return;
+        }
+        // If the children are equal we don't want to do anything
+        const areChildrenEqual = childrenAreEqual(children, previousChildren.current);
+        previousChildren.current = children;
+        if (areChildrenEqual) {
+            return;
+        }
+        // Add new children to the queue and remove the old children instance for
+        // its key to start the  out transition
+        setQueue((value) => {
+            const emptyQueue = {};
+            // eslint-disable-next-line guard-for-in
+            for (const key in value) {
+                emptyQueue[key] = null;
+            }
+            if (children === null) {
+                return emptyQueue;
+            }
+            return {
+                ...emptyQueue,
+                [getId()]: children,
+            };
+        });
+    }, [children, isMounted, previousChildren]);
+    const onChildrenMountedCleanup = useCallback((_children) => {
+        setQueue((value) => {
+            if ('key' in _children && _children.key !== null) {
+                // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+                delete value[_children.key];
+            }
+            return { ...value };
+        });
+        onChildrenMounted?.(_children, null);
+    }, [onChildrenMounted]);
+    return (_jsx(_Fragment, { children: Object.entries(queue).map(([key, queuedChildren]) => (_createElement(TransitionPresence, { onChildrenMounted: onChildrenMountedCleanup, ...props, key: key }, queuedChildren && cloneElement(queuedChildren, { key })))) }));
+}

package/dist/lifecycle/components/TransitionPresence/TransitionPresence.context.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+import type { BeforeUnmountCallback } from '../../hooks/useBeforeUnmount/useBeforeUnmount.js';
+export type TransitionPresenceContextType = Set<RefObject<BeforeUnmountCallback>> | undefined;
+export declare const TransitionPresenceContext: import("react").Context<TransitionPresenceContextType>;

package/dist/lifecycle/components/TransitionPresence/TransitionPresence.context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const TransitionPresenceContext = createContext(undefined);

package/dist/lifecycle/components/TransitionPresence/TransitionPresence.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from 'react';
+export type TransitionPresenceProps = {
+    children: ReactElement | null;
+    onPreviousChildrenUnmounting?(previousChildren: ReactElement | null, children: ReactElement | null): void | Promise<void>;
+    onPreviousChildrenUnmounted?(previousChildren: ReactElement | null, children: ReactElement | null): void | Promise<void>;
+    onChildrenMounted?(previousChildren: ReactElement | null, children: ReactElement | null): void | Promise<void>;
+};
+/**
+ * Will defer transition in new children by waiting on the
+ * `BeforeUnmountCallback`s that are registered using the `useBeforeUnmount`
+ * hook.
+ */
+export declare function TransitionPresence({ children, onPreviousChildrenUnmounting, onPreviousChildrenUnmounted, onChildrenMounted, }: TransitionPresenceProps): ReactElement;

package/dist/lifecycle/components/TransitionPresence/TransitionPresence.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { childrenAreEqual } from '../../../_utils/childrenAreEqual.js';
+import { useRefValue } from '../../../hooks/useRefValue/useRefValue.js';
+import { createTimeout } from '../../../index.js';
+import { useTransitionPresenceBeforeUnmount, } from '../../hooks/useBeforeUnmount/useBeforeUnmount.js';
+import { TransitionPresenceContext } from './TransitionPresence.context.js';
+/**
+ * Will defer transition in new children by waiting on the
+ * `BeforeUnmountCallback`s that are registered using the `useBeforeUnmount`
+ * hook.
+ */
+export function TransitionPresence({ children, onPreviousChildrenUnmounting, onPreviousChildrenUnmounted, onChildrenMounted, }) {
+    const beforeUnmountCallbacks = useMemo(() => new Set(), []);
+    const [previousChildren, setPreviousChildren] = useState(children);
+    const onPreviousChildrenUnmountingRef = useRefValue(onPreviousChildrenUnmounting);
+    const onPreviousChildrenUnmountedRef = useRefValue(onPreviousChildrenUnmounted);
+    const onChildrenMountedRef = useRefValue(onChildrenMounted);
+    const beforeUnmountPreviousChildren = useCallback(async (abortSignal) => {
+        const promises = [];
+        for (const callback of beforeUnmountCallbacks) {
+            promises.push(callback.current?.(abortSignal));
+        }
+        await Promise.all(promises);
+    }, [beforeUnmountCallbacks]);
+    useEffect(() => {
+        if (childrenAreEqual(children, previousChildren)) {
+            setPreviousChildren(children);
+            return;
+        }
+        const abortController = new AbortController();
+        (async () => {
+            onPreviousChildrenUnmountingRef.current?.(previousChildren, children);
+            // Defer children update for before unmount lifecycle
+            await beforeUnmountPreviousChildren(abortController.signal);
+            setPreviousChildren(null);
+            // Wait a tick after removing previous children to make sure new children
+            // are re-initialized
+            await createTimeout();
+            onPreviousChildrenUnmountedRef.current?.(previousChildren, children);
+            // Set new children
+            setPreviousChildren(children);
+            await createTimeout();
+            onChildrenMountedRef.current?.(previousChildren, children);
+        })();
+        return () => {
+            abortController.abort();
+        };
+    }, [
+        beforeUnmountCallbacks,
+        beforeUnmountPreviousChildren,
+        children,
+        onChildrenMountedRef,
+        onPreviousChildrenUnmountedRef,
+        onPreviousChildrenUnmountingRef,
+        previousChildren,
+    ]);
+    // Apply same effect when TransitionPresence in tree updates
+    useTransitionPresenceBeforeUnmount(beforeUnmountPreviousChildren);
+    return (_jsx(TransitionPresenceContext.Provider, { value: beforeUnmountCallbacks, children: previousChildren }));
+}

package/dist/lifecycle/hooks/useBeforeMount/useBeforeMount.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Executes a callback during the initial render, before mounting, but not during subsequent
+ * renders.
+ *
+ * Opposed to `useEffect` / `useMount`, the callback is executed synchronously,
+ * before the component is mounted.
+ *
+ * @param callback A function to be executed during the initial render, before mounting, but not
+ * during subsequent renders.
+ */
+export declare function useBeforeMount(callback: () => void): void;

package/dist/lifecycle/hooks/useBeforeMount/useBeforeMount.js

@@ -0,0 +1,21 @@
+import { useRef } from 'react';
+import { useMount } from '../useMount/useMount.js';
+/**
+ * Executes a callback during the initial render, before mounting, but not during subsequent
+ * renders.
+ *
+ * Opposed to `useEffect` / `useMount`, the callback is executed synchronously,
+ * before the component is mounted.
+ *
+ * @param callback A function to be executed during the initial render, before mounting, but not
+ * during subsequent renders.
+ */
+export function useBeforeMount(callback) {
+    const isBeforeMount = useRef(true);
+    if (isBeforeMount.current) {
+        callback();
+    }
+    useMount(() => {
+        isBeforeMount.current = false;
+    });
+}

package/dist/lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.d.ts

@@ -0,0 +1,11 @@
+export type BeforeUnmountCallback = (abortSignal: AbortSignal) => PromiseLike<unknown> | void;
+/**
+ * Executes async callback to defer unmounting of children in nearest
+ * TransitionPresence boundary
+ */
+export declare function useBeforeUnmount(callback: BeforeUnmountCallback): void;
+/**
+ * useBeforeUnmount without the warning, this should only be used within the
+ * <TransitionPresence> component in this package.
+ */
+export declare function useTransitionPresenceBeforeUnmount(callback: BeforeUnmountCallback): void;

package/dist/lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.js

@@ -0,0 +1,39 @@
+import { useContext, useEffect } from 'react';
+import { useRefValue } from '../../../hooks/useRefValue/useRefValue.js';
+import { TransitionPresenceContext } from '../../components/TransitionPresence/TransitionPresence.context.js';
+/**
+ * Executes async callback to defer unmounting of children in nearest
+ * TransitionPresence boundary
+ */
+export function useBeforeUnmount(callback) {
+    const transitionPresence = useContext(TransitionPresenceContext);
+    const callbackRef = useRefValue(callback);
+    if (transitionPresence === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn('Component is not rendered in the context of a TransitionPresence');
+    }
+    useEffect(() => {
+        queueMicrotask(() => {
+            transitionPresence?.add(callbackRef);
+        });
+        return () => {
+            transitionPresence?.delete(callbackRef);
+        };
+    }, [transitionPresence, callbackRef]);
+}
+/**
+ * useBeforeUnmount without the warning, this should only be used within the
+ * <TransitionPresence> component in this package.
+ */
+export function useTransitionPresenceBeforeUnmount(callback) {
+    const transitionPresence = useContext(TransitionPresenceContext);
+    const callbackRef = useRefValue(callback);
+    useEffect(() => {
+        queueMicrotask(() => {
+            transitionPresence?.add(callbackRef);
+        });
+        return () => {
+            transitionPresence?.delete(callbackRef);
+        };
+    }, [transitionPresence, callbackRef]);
+}

package/dist/lifecycle/hooks/useIsMounted/useIsMounted.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * Keeps track of whether the component is mounted, and returns a ref object that is updated
+ * accordingly.
+ *
+ * - `isMounted.current` is `false` before the component is mounted
+ * - `isMounted.current` is `true` after the component is mounted
+ * - `isMounted.current` is `false` during the unmount cleanup phase and after the component is
+ *   unmounted
+ *
+ * @returns A boolean ref object that reflects whether the component is mounted.
+ */
+export declare function useIsMounted(): RefObject<boolean>;

package/dist/lifecycle/hooks/useIsMounted/useIsMounted.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Keeps track of whether the component is mounted, and returns a ref object that is updated
+ * accordingly.
+ *
+ * - `isMounted.current` is `false` before the component is mounted
+ * - `isMounted.current` is `true` after the component is mounted
+ * - `isMounted.current` is `false` during the unmount cleanup phase and after the component is
+ *   unmounted
+ *
+ * @returns A boolean ref object that reflects whether the component is mounted.
+ */
+export function useIsMounted() {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        let unmounted = false;
+        // Delay setting this to true until all other useEffects have run
+        // however, this can be too late if there are any "setState" actions inside
+        // the other useEffects that cause an immediate re-render in the same tick.
+        // This is okay, since multiple renders in the same tick can still be considered
+        // as the mounting phase, and very rare.
+        queueMicrotask(() => {
+            if (unmounted) {
+                return;
+            }
+            isMounted.current = true;
+        });
+        return () => {
+            unmounted = true;
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}

package/dist/lifecycle/hooks/useIsMountedState/useIsMountedState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Exposes the mounted state that is updated after the component is mounted.
+ *
+ * This hook uses setState to update the state after the component is mounted, which means that
+ * the component will be re-rendered after the first render.
+ *
+ * @returns A boolean indicating whether the component is mounted.
+ */
+export declare function useIsMountedState(): boolean;

package/dist/lifecycle/hooks/useIsMountedState/useIsMountedState.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { useMount } from '../useMount/useMount.js';
+/**
+ * Exposes the mounted state that is updated after the component is mounted.
+ *
+ * This hook uses setState to update the state after the component is mounted, which means that
+ * the component will be re-rendered after the first render.
+ *
+ * @returns A boolean indicating whether the component is mounted.
+ */
+export function useIsMountedState() {
+    const [isMounted, setIsMounted] = useState(false);
+    useMount(() => {
+        // make sure that mounting has finished
+        // and then trigger a render in the next "tick"
+        queueMicrotask(() => {
+            setIsMounted(true);
+        });
+    });
+    return isMounted;
+}

package/dist/lifecycle/hooks/useMount/useMount.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React lifecycle hook that calls a function after the component is mounted.
+ * @param callbackFunction function to be called when the component is mounted
+ *
+ * @example
+ * ```
+ * useMount(() => {
+ *   console.log('component is mounted');
+ * })
+ * ```
+ */
+export declare function useMount(callbackFunction: () => void): void;

package/dist/lifecycle/hooks/useMount/useMount.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+/**
+ * React lifecycle hook that calls a function after the component is mounted.
+ * @param callbackFunction function to be called when the component is mounted
+ *
+ * @example
+ * ```
+ * useMount(() => {
+ *   console.log('component is mounted');
+ * })
+ * ```
+ */
+export function useMount(callbackFunction) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callbackFunction, []);
+}

package/dist/lifecycle/hooks/useUnmount/useUnmount.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React lifecycle hook that calls a function after the component is unmounted.
+ * @param callbackFunction function to be called when the component is unmounted
+ *
+ * @example
+ * ```
+ * useUnmount(() => {
+ *   console.log('component is unmounted');
+ * })
+ * ```
+ */
+export declare function useUnmount(callbackFunction: () => void): void;

package/dist/lifecycle/hooks/useUnmount/useUnmount.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRefValue } from '../../../hooks/useRefValue/useRefValue.js';
+/**
+ * React lifecycle hook that calls a function after the component is unmounted.
+ * @param callbackFunction function to be called when the component is unmounted
+ *
+ * @example
+ * ```
+ * useUnmount(() => {
+ *   console.log('component is unmounted');
+ * })
+ * ```
+ */
+export function useUnmount(callbackFunction) {
+    const callbackRef = useRefValue(callbackFunction);
+    useEffect(() => () => {
+        callbackRef.current?.();
+    }, [callbackRef]);
+}

package/dist/nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+/**
+ * The React documentation says about useLayoutEffect:
+ *
+ * "The signature is identical to useEffect, but it fires synchronously after all DOM mutations."
+ *
+ * That means this hook is a browser hook. But React code could be generated from the server without the Window API.
+ *
+ * If you're using NextJS, you'll have this error message:
+ * "Warning: useLayoutEffect does nothing on the server,
+ * because its effect cannot be encoded into the server renderer's output format.
+ * This will lead to a mismatch between the initial, non-hydrated UI and the intended UI.
+ * To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
+ * See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
+ *
+ * This hook fixes this problem by switching between useEffect and useLayoutEffect following the execution environment.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,18 @@
+import { useEffect, useLayoutEffect } from 'react';
+/**
+ * The React documentation says about useLayoutEffect:
+ *
+ * "The signature is identical to useEffect, but it fires synchronously after all DOM mutations."
+ *
+ * That means this hook is a browser hook. But React code could be generated from the server without the Window API.
+ *
+ * If you're using NextJS, you'll have this error message:
+ * "Warning: useLayoutEffect does nothing on the server,
+ * because its effect cannot be encoded into the server renderer's output format.
+ * This will lead to a mismatch between the initial, non-hydrated UI and the intended UI.
+ * To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
+ * See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
+ *
+ * This hook fixes this problem by switching between useEffect and useLayoutEffect following the execution environment.
+ */
+export const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;

package/dist/utils/arrayRef/arrayRef.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="lodash" resolution-mode="require"/>
+import type { MutableRefObject } from 'react';
+/**
+ * Helper to set element in RefObject<Array>
+ */
+declare function arrayRefInternal<T extends MutableRefObject<Array<unknown> | null>>(ref: T, index: number): (element: NonNullable<T['current']>[number]) => void;
+export declare const arrayRef: typeof arrayRefInternal & import("lodash").MemoizedFunction;
+export {};

package/dist/utils/arrayRef/arrayRef.js

@@ -0,0 +1,35 @@
+import { memoize } from 'lodash-es';
+import { trimEnd } from '../../_utils/trimEnd/trimEnd.js';
+/**
+ * Helper to set element in RefObject<Array>
+ */
+function arrayRefInternal(ref, index) {
+    return (element) => {
+        if (ref.current === null) {
+            ref.current = [];
+        }
+        ref.current[index] = element;
+        if (element === null) {
+            trimEnd(ref.current, null);
+        }
+    };
+}
+const refMap = new Map();
+let uniqueValueCounter = 0;
+/**
+ * Turns a ref and index into a unique key
+ * This is needed because the memoize function only uses string keys,
+ * and we need to use a ref as a key.
+ * The Map is used to make sure that the same ref always gets the same unique number,
+ * since Maps can use objects as keys.
+ *
+ * @param ref
+ * @param index
+ */
+function getMemoizeKeyForRefAndIndex(ref, index) {
+    if (!refMap.has(ref)) {
+        refMap.set(ref, ++uniqueValueCounter);
+    }
+    return `${refMap.get(ref)}_${index}`;
+}
+export const arrayRef = memoize(arrayRefInternal, (ref, index) => getMemoizeKeyForRefAndIndex(ref, index));

package/dist/utils/createTimeout/createTimeout.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a promise that resolves after given amount of time. Use the default
+ * value of `0` to wait for the next tick.
+ */
+export declare function createTimeout(ms?: number): Promise<void>;

package/dist/utils/createTimeout/createTimeout.js

@@ -0,0 +1,9 @@
+/**
+ * Returns a promise that resolves after given amount of time. Use the default
+ * value of `0` to wait for the next tick.
+ */
+export function createTimeout(ms = 0) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}

package/dist/utils/isRefObject/isRefObject.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from 'react';
+/**
+ * Type guard to check if a value is a RefObject
+ */
+export declare function isRefObject(target: unknown): target is RefObject<unknown>;