@mediamonks/react-kit 1.0.0-0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Media.Monks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+[![npm version](https://img.shields.io/npm/v/@mediamonks/react-kit)](https://www.npmjs.com/package/@mediamonks/react-kit)
+[![npm downloads](https://img.shields.io/npm/dm/@mediamonks/react-kit)](https://www.npmjs.com/package/@mediamonks/react-kit)
+
+# @mediamonks/react-kit
+
+Collection of commonly used React hooks.
+
+## Getting started
+
+### Installing
+
+Add `@mediamonks/react-kit` to your project:
+
+```sh
+npm i @mediamonks/react-kit
+```
+
+### Example
+
+Use a hook inside a component:
+
+```tsx
+import { useToggle } from '@mediamonks/react-kit';
+
+function DemoComponent() {
+  const [state, toggle] = useToggle(false);
+
+  return (
+    <div>
+      <div>{state} </div>
+      <button onClick={() => toggle()}>Toggle</button>
+    </div>
+  );
+}
+```
+
+## Docs
+
+[https://mediamonks.github.io/react-kit/](https://mediamonks.github.io/react-kit/)
+
+## Development
+
+The information below should help you develop new hooks in this library.
+
+Run `npm run test -- --watch` to run all unit tests in watch mode.
+
+Run `npm run storybook` to preview your stories and documentation.
+
+### Folder Structure
+
+`useHookName`
+
+- `useHookName.ts` – The Hook itself
+- `useHookName.stories.tsx` – To showcase the hook with a working UI, also used for dom testing
+- `useHookName.stories.mdx` – Documentation about the hook
+- `useHookName.test.tsx` – Unit tests for the hook
+
+### Steps for adding a new Hook:
+
+Run the `plop` script and enter your hook name starting with `use`.
+
+```shell
+npm run plop
+```
+
+Which will execute the following steps, where you need to fill in the content.
+
+- Create a new folder and a new `ts` file with the hook
+  - Use the `use` prefix for the name of the hook
+  - Use named exports to export the hook
+  - Enter JSDoc for description and parameters
+- Re-export the hook in the `index.ts`
+- Add a markdown file documenting the hook
+  - General description
+  - Reference for types, parameters, return type
+  - Simple and extended use cases
+- Add a story file to test out the hook
+  - Add an instructions banner at the top of the story
+  - Create a type for the StoryArgs that match the template, so it can be used when rendering the
+    Story inside tests.
+- Add unit tests for the hook
+
+## Writing Unit test
+
+Hooks can be tested using the `renderHook` function that now exists in `@testing-library/react`.
+
+At the time of writing, this method is undocumented. It can be used as follows:
+
+```ts
+import { renderHook } from '@testing-library/react';
+
+// init the hook
+const { result, rerender, unmount } = renderHook(useToggle, {
+  // values passed to your hook
+  initialProps: { foo: 'bar' },
+});
+
+// inspect the response of the hook
+console.log(result.current);
+```
+
+### Run Component Lifecycle
+
+To interact with your hook, you must use the `act` function.
+
+```ts
+import { act, renderHook } from '@testing-library/react';
+
+// init the hook
+const { result, rerender, unmount } = renderHook(useToggle, {
+  // values passed to your hook
+  initialProps: { foo: 'bar' },
+});
+
+// inspect the response of the hook
+console.log(result.current);
+
+act(() => {
+  // interact with your hook
+  result.current[1]();
+});
+
+// inspect the updated value of the hook
+console.log(result.current);
+```

package/dist/_hooks/useStorybookLog.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/**
+ * This hook is an internal utility function to visually "log" messages inside your story UI.
+ *
+ * ```
+ *  const { getLog, log } = useStorybookLog();
+ *
+ *  return (
+ *    <div>
+ *      <div>{getLog()}</div>
+ *      <button onClick={() => log('clicked')}>Click me</button>
+ *    </div>
+ *  )
+ * ```
+ *
+ * @param logRef The Ref that will hold the logs.
+ */
+export declare function useStorybookLog(): {
+    getLog(): ReactNode;
+    log(message: string): void;
+};

package/dist/_hooks/useStorybookLog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+/**
+ * This hook is an internal utility function to visually "log" messages inside your story UI.
+ *
+ * ```
+ *  const { getLog, log } = useStorybookLog();
+ *
+ *  return (
+ *    <div>
+ *      <div>{getLog()}</div>
+ *      <button onClick={() => log('clicked')}>Click me</button>
+ *    </div>
+ *  )
+ * ```
+ *
+ * @param logRef The Ref that will hold the logs.
+ */
+export function useStorybookLog() {
+    const [logs, setLogs] = useState([]);
+    const log = useCallback((message) => {
+        setLogs((oldLogs) => [...oldLogs, message]);
+        setTimeout(() => {
+            setLogs([]);
+        }, 2000);
+    }, []);
+    const getLog = useCallback(() => (_jsx(_Fragment, { children: logs.map((message) => (_jsx("div", { className: "alert alert-dismissible alert-info", children: message }, message))) })), [logs]);
+    return { getLog, log };
+}

package/dist/_utils/childrenAreEqual.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement, type ReactFragment } from 'react';
+export declare function childrenAreEqual(previousChildren: ReactElement | ReactFragment | null, nextChildren: ReactElement | ReactFragment | null): boolean;

package/dist/_utils/childrenAreEqual.js

@@ -0,0 +1,16 @@
+export function childrenAreEqual(previousChildren, nextChildren) {
+    if (previousChildren === nextChildren) {
+        return true;
+    }
+    // React reconciler will create a new instance when children type changes
+    if ((previousChildren !== null && 'type' in previousChildren && previousChildren.type) !==
+        (nextChildren !== null && 'type' in nextChildren && nextChildren.type)) {
+        return false;
+    }
+    // React reconciler will create a new instance when children key changes
+    if ((previousChildren !== null && 'key' in previousChildren && previousChildren.key) !==
+        (nextChildren !== null && 'key' in nextChildren && nextChildren.key)) {
+        return false;
+    }
+    return true;
+}

package/dist/_utils/getId.d.ts

@@ -0,0 +1 @@
+export declare function getId(): string;

package/dist/_utils/getId.js

@@ -0,0 +1,4 @@
+let id = 0;
+export function getId() {
+    return (id++ % Number.MAX_SAFE_INTEGER).toString();
+}

package/dist/_utils/isNonNullableRecord/isNonNullableRecord.d.ts

@@ -0,0 +1,9 @@
+type UnknownRecord = Record<string | number | symbol, unknown>;
+export type NonNullableRecord<T extends UnknownRecord> = {
+    [K in keyof T]: NonNullable<T[K]>;
+};
+/**
+ * Check if any value in record is nullable
+ */
+export declare function isNonNullableRecord<T extends UnknownRecord>(record: T): record is NonNullableRecord<T>;
+export {};

package/dist/_utils/isNonNullableRecord/isNonNullableRecord.js

@@ -0,0 +1,6 @@
+/**
+ * Check if any value in record is nullable
+ */
+export function isNonNullableRecord(record) {
+    return Object.values(record).every((value) => value !== undefined && value !== null);
+}

package/dist/_utils/trimEnd/trimEnd.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Trim values from end of array
+ */
+export declare function trimEnd<T>(target: Array<T>, value?: T): Array<T>;

package/dist/_utils/trimEnd/trimEnd.js

@@ -0,0 +1,9 @@
+/**
+ * Trim values from end of array
+ */
+export function trimEnd(target, value) {
+    while (target.length > 0 && target.at(-1) === value) {
+        target.pop();
+    }
+    return target;
+}

package/dist/components/AutoFill/AutoFill.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement, type RefCallback } from 'react';
+type AutoFillChildrenProps = {
+    ref: RefCallback<unknown>;
+};
+type AutoFillProps = {
+    children: ReactElement<AutoFillChildrenProps> | ReadonlyArray<ReactElement<AutoFillChildrenProps>>;
+    axis?: 'x' | 'y';
+};
+/**
+ * Repeats children to fill the parent element in given axis.
+ */
+export declare function AutoFill({ children, axis }: AutoFillProps): ReactElement;
+export {};

package/dist/components/AutoFill/AutoFill.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
+import { useEventListener } from '../../hooks/useEventListener/useEventListener.js';
+import { useRafCallback } from '../../index.js';
+import { arrayRef } from '../../utils/arrayRef/arrayRef.js';
+/**
+ * Repeats children to fill the parent element in given axis.
+ */
+export function AutoFill({ children, axis = 'x' }) {
+    const childrenRef = useRef([]);
+    const [repeatCount, setRepeatCount] = useState(0);
+    const updateRepeatCount = useCallback(() => {
+        const lastChild = childrenRef.current?.at(-1);
+        if (!(lastChild instanceof HTMLElement) || !lastChild.parentElement) {
+            return;
+        }
+        const { offsetTop, offsetLeft, clientWidth, clientHeight, parentElement } = lastChild;
+        const { clientWidth: parentClientWidth, clientHeight: parentClientHeight } = parentElement;
+        if (axis === 'x') {
+            setRepeatCount(Math.ceil(parentClientWidth / (offsetLeft + clientWidth)));
+        }
+        else {
+            setRepeatCount(Math.ceil(parentClientHeight / (offsetTop + clientHeight)));
+        }
+    }, [axis]);
+    useEffect(updateRepeatCount, [updateRepeatCount, children]);
+    useEventListener(globalThis.window, 'resize', useRafCallback(updateRepeatCount));
+    return (_jsxs(_Fragment, { children: [Children.map(children, (child, index) => isValidElement(child) &&
+                cloneElement(child, {
+                    key: child.key,
+                    ref: arrayRef(childrenRef, index),
+                })), Array.from({ length: repeatCount }, (_, index) => (_jsx(Fragment, { children: children }, index)))] }));
+}

package/dist/gsap/animations.d.ts

@@ -0,0 +1,11 @@
+declare class AnimationsMap extends Map {
+    private readonly callbacks;
+    private updateQueued;
+    set(key: unknown, value: gsap.core.Animation): this;
+    listen(callback: () => void): () => void;
+}
+/**
+ * Global map of animations that can be accessed by reference
+ */
+export declare const animations: AnimationsMap;
+export {};

package/dist/gsap/animations.js

@@ -0,0 +1,35 @@
+class AnimationsMap extends Map {
+    callbacks = new Set();
+    updateQueued = false;
+    set(key, value) {
+        if (key === null || key === undefined) {
+            throw new Error('Cannot set animation with null or undefined key. Make sure the ref you pass correctly has its value set.');
+        }
+        // skip if value is the same, mostly for optimisation
+        if (value === this.get(key)) {
+            return this;
+        }
+        const result = super.set(key, value);
+        if (this.updateQueued) {
+            return result;
+        }
+        this.updateQueued = true;
+        queueMicrotask(() => {
+            for (const callback of this.callbacks) {
+                callback();
+            }
+            this.updateQueued = false;
+        });
+        return result;
+    }
+    listen(callback) {
+        this.callbacks.add(callback);
+        return () => {
+            this.callbacks.delete(callback);
+        };
+    }
+}
+/**
+ * Global map of animations that can be accessed by reference
+ */
+export const animations = new AnimationsMap();

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.d.ts

@@ -0,0 +1,24 @@
+import SplitText from 'gsap/SplitText';
+import { type ComponentProps, type ReactElement, type RefAttributes } from 'react';
+/**
+ * Allowed as prop values
+ */
+type KnownTarget = Exclude<keyof JSX.IntrinsicElements, symbol | object>;
+type SplitTextWrapperProps<T extends KnownTarget> = {
+    /**
+     * The SplitText variables
+     * @link https://greensock.com/docs/v3/Plugins/SplitText
+     */
+    variables?: SplitText.Vars;
+    /**
+     * The element type to render, the default is `div`
+     */
+    as?: T;
+};
+/**
+ * Polymorphic component type, necessary to get all the attributes/props for the
+ * as prop component
+ */
+type SplitTextWrapperComponent = <T extends KnownTarget = 'div'>(props: SplitTextWrapperProps<T> & Omit<ComponentProps<T>, keyof SplitTextWrapperProps<T> | 'ref'> & RefAttributes<SplitText | null>) => ReactElement;
+export declare const SplitTextWrapper: SplitTextWrapperComponent;
+export {};

package/dist/gsap/components/SplitTextWrapper/SplitTextWrapper.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import gsap from 'gsap';
+import SplitText from 'gsap/SplitText';
+import { renderToString } from 'react-dom/server';
+import { ensuredForwardRef } from '../../../hocs/ensuredForwardRef/ensuredForwardRef.js';
+if (typeof window !== 'undefined') {
+    gsap.registerPlugin(SplitText);
+}
+// @ts-expect-error polymorphic type is not compatible with ensuredForwardRef function factory
+export const SplitTextWrapper = ensuredForwardRef(({ variables = {}, as, children, ...props }, ref) => {
+    /**
+     * Not using useCallback on purpose so that a new SplitText instance is
+     * created whenever this component rerenders the children
+     */
+    const onRef = async (element) => {
+        if (ref.current && 'isSplit' in ref.current && ref.current.isSplit) {
+            return;
+        }
+        ref.current = new SplitText(element, variables);
+    };
+    const Component = (as ?? 'div');
+    return (_jsx(Component, { ...props, dangerouslySetInnerHTML: props.dangerouslySetInnerHTML ?? {
+            // eslint-disable-next-line @typescript-eslint/naming-convention, react/jsx-no-useless-fragment
+            __html: renderToString(_jsx(_Fragment, { children: children })),
+        }, 
+        // eslint-disable-next-line react/jsx-no-bind
+        ref: onRef }));
+});

package/dist/gsap/hooks/useAnimation/useAnimation.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+/**
+ * Create gsap animation via a callback, animation is killed when component is
+ * unmounted or when a new callback function is provided.
+ */
+export declare function useAnimation<T extends gsap.core.Animation | undefined>(callback: () => T, dependencies: ReadonlyArray<unknown>): RefObject<T | undefined>;

package/dist/gsap/hooks/useAnimation/useAnimation.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Create gsap animation via a callback, animation is killed when component is
+ * unmounted or when a new callback function is provided.
+ */
+export function useAnimation(callback, dependencies) {
+    const animation = useRef();
+    // eslint-disable-next-line react-hooks/exhaustive-deps, no-underscore-dangle
+    const _callback = useCallback(callback, dependencies);
+    useEffect(() => {
+        // eslint-disable-next-line no-underscore-dangle
+        const _animation = _callback();
+        animation.current = _animation;
+        return () => {
+            _animation?.kill();
+        };
+    }, [_callback]);
+    return animation;
+}

package/dist/gsap/hooks/useExposeAnimation/useExposeAnimation.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+import { type Unreffable } from '../../../utils/unref/unref.js';
+/**
+ * Hook to store animation using a reference in global animations map
+ */
+export declare function useExposeAnimation(animation: RefObject<gsap.core.Animation | undefined>, reference: Unreffable<unknown>): void;

package/dist/gsap/hooks/useExposeAnimation/useExposeAnimation.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { unref } from '../../../utils/unref/unref.js';
+import { animations } from '../../animations.js';
+/**
+ * Hook to store animation using a reference in global animations map
+ */
+export function useExposeAnimation(animation, reference) {
+    useEffect(() => {
+        // eslint-disable-next-line no-underscore-dangle
+        const _reference = unref(reference);
+        // eslint-disable-next-line no-underscore-dangle
+        const _animation = animation.current;
+        if (_animation && _reference) {
+            animations.set(_reference, _animation);
+        }
+        return () => {
+            animations.delete(_reference);
+        };
+        // TODO: We currently rely on the Component where this hook is used,
+        //  and we know that animation will get a new ref.current assigned
+        //  as part of useAnimation, if that has dependencies.
+        //  If that updates (due to a re-render), we should also update
+        //  the animation in the global map.
+        //  This feels a bit flaky, but I can't think of a better way to do this currently.
+        //  We should probably have these hooks more integrated with each other.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animation, animation.current, reference]);
+}

package/dist/gsap/hooks/useExposedAnimation/useExposedAnimation.d.ts

@@ -0,0 +1,5 @@
+import { type Unreffable } from '../../../index.js';
+/**
+ * Hook to get animation from global animations map using given reference
+ */
+export declare function useExposedAnimation<T extends gsap.core.Animation>(target: Unreffable<unknown>): T | undefined;

package/dist/gsap/hooks/useExposedAnimation/useExposedAnimation.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { unref } from '../../../index.js';
+import { animations } from '../../animations.js';
+/**
+ * Hook to get animation from global animations map using given reference
+ */
+export function useExposedAnimation(target) {
+    const [animation, setAnimation] = useState();
+    useEffect(() => animations.listen(() => {
+        setAnimation(animations.get(unref(target)));
+    }), [target]);
+    return animation;
+}

package/dist/gsap/hooks/useExposedAnimations/useExposedAnimations.d.ts

@@ -0,0 +1,5 @@
+import { type Unreffable } from '../../../index.js';
+/**
+ * Hook to get animation from global animations map using given reference
+ */
+export declare function useExposedAnimations(target: Unreffable<ReadonlyArray<unknown>>): ReadonlyArray<gsap.core.Animation>;

package/dist/gsap/hooks/useExposedAnimations/useExposedAnimations.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { unref } from '../../../index.js';
+import { animations } from '../../animations.js';
+/**
+ * Hook to get animation from global animations map using given reference
+ */
+export function useExposedAnimations(target) {
+    const [exposedAnimations, setExposedAnimations] = useState([]);
+    useEffect(() => animations.listen(() => {
+        const array = unref(target);
+        if (array) {
+            const newAnimations = array.map((ref) => animations.get(ref));
+            // this should only be done when the refs have been updated, otherwise we're returning
+            // a new array ref with the same values, which will cause a re-render
+            setExposedAnimations((currentAnimations) => areArraysEqual(newAnimations, currentAnimations) ? currentAnimations : newAnimations);
+        }
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [target]);
+    return exposedAnimations;
+}
+function areArraysEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (const [index, element] of a.entries()) {
+        if (element !== b[index]) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/gsap/hooks/useFlip/useFlip.d.ts

@@ -0,0 +1,3 @@
+import { type MutableRefObject } from 'react';
+import { type Unreffable } from '../../../utils/unref/unref.js';
+export declare function useFlip(ref: Unreffable<HTMLElement | null>, flipStateVariables?: Flip.FromToVars): MutableRefObject<Flip.FlipState | undefined>;

package/dist/gsap/hooks/useFlip/useFlip.js

@@ -0,0 +1,18 @@
+import gsap from 'gsap';
+import Flip from 'gsap/Flip';
+import { useEffect, useRef } from 'react';
+import { unref } from '../../../utils/unref/unref.js';
+gsap.registerPlugin(Flip);
+export function useFlip(ref, flipStateVariables = {}) {
+    const flipStateRef = useRef();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (globalThis.window !== undefined) {
+        flipStateRef.current = Flip.getState(unref(ref));
+    }
+    useEffect(() => {
+        if (flipStateRef.current) {
+            Flip.from(flipStateRef.current, flipStateVariables);
+        }
+    });
+    return flipStateRef;
+}

package/dist/gsap/hooks/useScrollAnimation/useScrollAnimation.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to create animation that make use of ScrollTrigger, ScrollTrigger is refreshed
+ * when the global animations map is updated.
+ *
+ * Note: do not scrub a React component's root because React won't know what element to
+ * unmount when the component with a pinned animation is removed from the vDOM.
+ */
+export declare function useScrollAnimation<T extends gsap.core.Animation>(callback: () => T | undefined, dependencies: ReadonlyArray<unknown>): RefObject<T | undefined>;

package/dist/gsap/hooks/useScrollAnimation/useScrollAnimation.js

@@ -0,0 +1,26 @@
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/ScrollTrigger';
+import { useEffect, useRef } from 'react';
+import { animations } from '../../animations.js';
+import { useAnimation } from '../useAnimation/useAnimation.js';
+import { useExposeAnimation } from '../useExposeAnimation/useExposeAnimation.js';
+if (typeof window !== 'undefined') {
+    gsap.registerPlugin(ScrollTrigger);
+}
+/**
+ * Hook to create animation that make use of ScrollTrigger, ScrollTrigger is refreshed
+ * when the global animations map is updated.
+ *
+ * Note: do not scrub a React component's root because React won't know what element to
+ * unmount when the component with a pinned animation is removed from the vDOM.
+ */
+export function useScrollAnimation(callback, dependencies) {
+    const animation = useAnimation(callback, dependencies);
+    // Expose animation so that we can leverage the listener from the global animations map
+    const ref = useRef(Symbol('useScrollAnimation'));
+    useExposeAnimation(animation, ref);
+    useEffect(() => animations.listen(() => {
+        ScrollTrigger.refresh();
+    }), []);
+    return animation;
+}

package/dist/gsap/utils/getAnimation/getAnimation.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Tries to get animation from global animations map for given reference
+ */
+export declare function getAnimation(reference: unknown): gsap.core.Animation | undefined;

package/dist/gsap/utils/getAnimation/getAnimation.js

@@ -0,0 +1,7 @@
+import { animations } from '../../animations.js';
+/**
+ * Tries to get animation from global animations map for given reference
+ */
+export function getAnimation(reference) {
+    return animations.get(reference);
+}

package/dist/hocs/ensuredForwardRef/ensuredForwardRef.d.ts

@@ -0,0 +1,11 @@
+import { type ForwardRefExoticComponent, type MutableRefObject, type PropsWithoutRef, type ReactElement, type RefAttributes } from 'react';
+export interface EnsuredForwardRefRenderFunction<T, P = Record<string | number | symbol, unknown>> {
+    (props: P, ref: MutableRefObject<T | null>): ReactElement | null;
+    displayName?: string | undefined;
+    /**
+     * defaultProps are not supported on render functions
+     */
+    defaultProps?: never;
+    propTypes?: never;
+}
+export declare function ensuredForwardRef<T, P = Record<string | number | symbol, unknown>>(Component: EnsuredForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;