@cloudscape-design/components-themeable 3.0.373 → 3.0.375

package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js

@@ -1,54 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
-import { useEffect, useLayoutEffect } from 'react';
-import { useStableEventHandler } from '../use-stable-event-handler';
-import { convertResizeObserverEntry } from './utils';
-/**
- * Attaches resize-observer to the referenced element.
- *
- * Examples:
- *     // With React reference
- *     const ref = useRef(null)
- *     useResizeObserver(ref, (entry) => setState(getWidth(entry)))
- *
- *     // With ID reference
- *     const getElement = useCallback(() => document.getElementById(id), [id])
- *     useResizeObserver(getElement, (entry) => setState(getWidth(entry)))
- *
- * @param elementRef React reference or memoized getter for the target element
- * @param onObserve Function to fire when observation occurs
- */
-export function useResizeObserver(elementRef, onObserve) {
-    const stableOnObserve = useStableEventHandler(onObserve);
-    // This effect provides a synchronous update required to prevent flakiness when initial state and first observed state are different.
-    // Can potentially conflict with React concurrent mode: https://17.reactjs.org/docs/concurrent-mode-intro.html.
-    // A possible solution would be to make consumers not render any content until the first (asynchronous) observation is available.
-    useLayoutEffect(() => {
-        const element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-        if (element) {
-            onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));
-        }
-    }, 
-    // This effect is only needed for the first render to provide a synchronous update.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    useEffect(() => {
-        const element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-        if (element) {
-            let connected = true;
-            const observer = new ResizeObserver(entries => {
-                // Prevent observe notifications on already unmounted component.
-                if (connected) {
-                    stableOnObserve(convertResizeObserverEntry(entries[0]));
-                }
-            });
-            observer.observe(element);
-            return () => {
-                connected = false;
-                observer.disconnect();
-            };
-        }
-    }, [elementRef, stableOnObserve]);
-}
-//# sourceMappingURL=use-resize-observer.js.map

package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-resize-observer.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-resize-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAIrD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAA4B,EAAE,SAA+C;IAC7G,MAAM,eAAe,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAEzD,qIAAqI;IACrI,+GAA+G;IAC/G,iIAAiI;IACjI,eAAe,CACb,GAAG,EAAE;QACH,MAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,0BAA0B,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACzE;IACH,CAAC;IACD,mFAAmF;IACnF,uDAAuD;IACvD,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAC5C,gEAAgE;gBAChE,IAAI,SAAS,EAAE;oBACb,eAAe,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACzD;YACH,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC1B,OAAO,GAAG,EAAE;gBACV,SAAS,GAAG,KAAK,CAAC;gBAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;AACpC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';\nimport React, { useEffect, useLayoutEffect } from 'react';\nimport { useStableEventHandler } from '../use-stable-event-handler';\nimport { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';\nimport { convertResizeObserverEntry } from './utils';\n\ntype ElementReference = (() => Element | null) | React.RefObject<Element>;\n\n/**\n * Attaches resize-observer to the referenced element.\n *\n * Examples:\n *     // With React reference\n *     const ref = useRef(null)\n *     useResizeObserver(ref, (entry) => setState(getWidth(entry)))\n *\n *     // With ID reference\n *     const getElement = useCallback(() => document.getElementById(id), [id])\n *     useResizeObserver(getElement, (entry) => setState(getWidth(entry)))\n *\n * @param elementRef React reference or memoized getter for the target element\n * @param onObserve Function to fire when observation occurs\n */\nexport function useResizeObserver(elementRef: ElementReference, onObserve: (entry: ContainerQueryEntry) => void) {\n  const stableOnObserve = useStableEventHandler(onObserve);\n\n  // This effect provides a synchronous update required to prevent flakiness when initial state and first observed state are different.\n  // Can potentially conflict with React concurrent mode: https://17.reactjs.org/docs/concurrent-mode-intro.html.\n  // A possible solution would be to make consumers not render any content until the first (asynchronous) observation is available.\n  useLayoutEffect(\n    () => {\n      const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n      if (element) {\n        onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));\n      }\n    },\n    // This effect is only needed for the first render to provide a synchronous update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  useEffect(() => {\n    const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n    if (element) {\n      let connected = true;\n      const observer = new ResizeObserver(entries => {\n        // Prevent observe notifications on already unmounted component.\n        if (connected) {\n          stableOnObserve(convertResizeObserverEntry(entries[0]));\n        }\n      });\n      observer.observe(element);\n      return () => {\n        connected = false;\n        observer.disconnect();\n      };\n    }\n  }, [elementRef, stableOnObserve]);\n}\n"]}

package/lib/internal/template/internal/hooks/container-queries/utils.d.ts

@@ -1,4 +0,0 @@
-import { ResizeObserverEntry } from '@juggle/resize-observer';
-import { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';
-export declare function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry;
-//# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/internal/hooks/container-queries/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAE3E,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,GAAG,mBAAmB,CAQ1F"}

package/lib/internal/template/internal/hooks/container-queries/utils.js

@@ -1,10 +0,0 @@
-export function convertResizeObserverEntry(entry) {
-    return {
-        target: entry.target,
-        contentBoxWidth: entry.contentBoxSize[0].inlineSize,
-        contentBoxHeight: entry.contentBoxSize[0].blockSize,
-        borderBoxWidth: entry.borderBoxSize[0].inlineSize,
-        borderBoxHeight: entry.borderBoxSize[0].blockSize,
-    };
-}
-//# sourceMappingURL=utils.js.map

package/lib/internal/template/internal/hooks/container-queries/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/utils.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,0BAA0B,CAAC,KAA0B;IACnE,OAAO;QACL,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU;QACnD,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU;QACjD,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;KAClD,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserverEntry } from '@juggle/resize-observer';\nimport { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';\n\nexport function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry {\n  return {\n    target: entry.target,\n    contentBoxWidth: entry.contentBoxSize[0].inlineSize,\n    contentBoxHeight: entry.contentBoxSize[0].blockSize,\n    borderBoxWidth: entry.borderBoxSize[0].inlineSize,\n    borderBoxHeight: entry.borderBoxSize[0].blockSize,\n  };\n}\n"]}

package/lib/internal/template/internal/hooks/use-singleton-handler/index.d.ts

@@ -1,11 +0,0 @@
-type ValueCallback<T> = (value: T) => void;
-type CleanupCallback = () => void;
-export type UseSingleton<T> = (listener: ValueCallback<T>) => void;
-export declare function createSingletonHandler<T>(factory: (handler: ValueCallback<T>) => CleanupCallback): UseSingleton<T>;
-interface SingletonStateOptions<T> {
-    factory: (handler: ValueCallback<T>) => CleanupCallback;
-    initialState: T | (() => T);
-}
-export declare function createSingletonState<T>({ factory, initialState }: SingletonStateOptions<T>): () => T;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/use-singleton-handler/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-singleton-handler/index.ts"],"names":[],"mappings":"AAKA,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAC3C,KAAK,eAAe,GAAG,MAAM,IAAI,CAAC;AAClC,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;AAEnE,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,CA6BlH;AAED,UAAU,qBAAqB,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,eAAe,CAAC;IACxD,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,qBAAqB,CAAC,CAAC,CAAC,WAW1F"}

package/lib/internal/template/internal/hooks/use-singleton-handler/index.js

@@ -1,45 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useEffect, useState } from 'react';
-import { unstable_batchedUpdates } from 'react-dom';
-export function createSingletonHandler(factory) {
-    const listeners = [];
-    const callback = value => {
-        unstable_batchedUpdates(() => {
-            for (const listener of listeners) {
-                listener(value);
-            }
-        });
-    };
-    let cleanup;
-    return function useSingleton(listener) {
-        useEffect(() => {
-            if (listeners.length === 0) {
-                cleanup = factory(callback);
-            }
-            listeners.push(listener);
-            return () => {
-                listeners.splice(listeners.indexOf(listener), 1);
-                if (listeners.length === 0) {
-                    cleanup();
-                    cleanup = undefined;
-                }
-            };
-            // register handlers only on mount
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
-    };
-}
-export function createSingletonState({ factory, initialState }) {
-    const useSingleton = createSingletonHandler(factory);
-    let value = initialState;
-    return function useSingletonState() {
-        const [state, setState] = useState(value);
-        useSingleton(newValue => {
-            value = newValue;
-            setState(newValue);
-        });
-        return state;
-    };
-}
-//# sourceMappingURL=index.js.map

package/lib/internal/template/internal/hooks/use-singleton-handler/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-singleton-handler/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAMpD,MAAM,UAAU,sBAAsB,CAAI,OAAuD;IAC/F,MAAM,SAAS,GAA4B,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAqB,KAAK,CAAC,EAAE;QACzC,uBAAuB,CAAC,GAAG,EAAE;YAC3B,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;gBAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,IAAI,OAAiC,CAAC;IAEtC,OAAO,SAAS,YAAY,CAAC,QAA0B;QACrD,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1B,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;aAC7B;YACD,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEzB,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;gBACjD,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;oBAC1B,OAAQ,EAAE,CAAC;oBACX,OAAO,GAAG,SAAS,CAAC;iBACrB;YACH,CAAC,CAAC;YACF,kCAAkC;YAClC,uDAAuD;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAI,EAAE,OAAO,EAAE,YAAY,EAA4B;IACzF,MAAM,YAAY,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACrD,IAAI,KAAK,GAAG,YAAY,CAAC;IACzB,OAAO,SAAS,iBAAiB;QAC/B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,KAAK,CAAC,CAAC;QAC7C,YAAY,CAAC,QAAQ,CAAC,EAAE;YACtB,KAAK,GAAG,QAAQ,CAAC;YACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\nimport { unstable_batchedUpdates } from 'react-dom';\n\ntype ValueCallback<T> = (value: T) => void;\ntype CleanupCallback = () => void;\nexport type UseSingleton<T> = (listener: ValueCallback<T>) => void;\n\nexport function createSingletonHandler<T>(factory: (handler: ValueCallback<T>) => CleanupCallback): UseSingleton<T> {\n  const listeners: Array<ValueCallback<T>> = [];\n  const callback: ValueCallback<T> = value => {\n    unstable_batchedUpdates(() => {\n      for (const listener of listeners) {\n        listener(value);\n      }\n    });\n  };\n  let cleanup: (() => void) | undefined;\n\n  return function useSingleton(listener: ValueCallback<T>) {\n    useEffect(() => {\n      if (listeners.length === 0) {\n        cleanup = factory(callback);\n      }\n      listeners.push(listener);\n\n      return () => {\n        listeners.splice(listeners.indexOf(listener), 1);\n        if (listeners.length === 0) {\n          cleanup!();\n          cleanup = undefined;\n        }\n      };\n      // register handlers only on mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n  };\n}\n\ninterface SingletonStateOptions<T> {\n  factory: (handler: ValueCallback<T>) => CleanupCallback;\n  initialState: T | (() => T); // useState signature\n}\n\nexport function createSingletonState<T>({ factory, initialState }: SingletonStateOptions<T>) {\n  const useSingleton = createSingletonHandler(factory);\n  let value = initialState;\n  return function useSingletonState() {\n    const [state, setState] = useState<T>(value);\n    useSingleton(newValue => {\n      value = newValue;\n      setState(newValue);\n    });\n    return state;\n  };\n}\n"]}

package/lib/internal/template/internal/hooks/use-stable-event-handler/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * A callback that stays stable between renders even as the dependencies change.
- * Not a recommended React pattern, so it should be used sparingly and only if
- * the callback is an event handler (i.e. not used during rendering) and causing
- * clear performance issues.
- *
- * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
- */
-export declare function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T;
-//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/use-stable-event-handler/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-stable-event-handler/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAQjF"}

package/lib/internal/template/internal/hooks/use-stable-event-handler/index.js

@@ -1,19 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useCallback, useEffect, useRef } from 'react';
-/**
- * A callback that stays stable between renders even as the dependencies change.
- * Not a recommended React pattern, so it should be used sparingly and only if
- * the callback is an event handler (i.e. not used during rendering) and causing
- * clear performance issues.
- *
- * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
- */
-export function useStableEventHandler(fn) {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = fn;
-    });
-    return useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.apply(undefined, args); }, []);
-}
-//# sourceMappingURL=index.js.map

package/lib/internal/template/internal/hooks/use-stable-event-handler/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-stable-event-handler/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CAAoC,EAAK;IAC5E,MAAM,GAAG,GAAG,MAAM,EAAK,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC,CAAC,GAAG,IAAW,EAAE,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA,EAAA,EAAE,EAAE,CAAM,CAAC;AACvF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useRef } from 'react';\n\n/**\n * A callback that stays stable between renders even as the dependencies change.\n * Not a recommended React pattern, so it should be used sparingly and only if\n * the callback is an event handler (i.e. not used during rendering) and causing\n * clear performance issues.\n *\n * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n */\nexport function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    ref.current = fn;\n  });\n\n  return useCallback((...args: any[]) => ref.current?.apply(undefined, args), []) as T;\n}\n"]}