@tale-ui/utils 0.0.3

package/esm/useMergedRefs.js

@@ -0,0 +1,108 @@
+import { useRefWithInit } from "./useRefWithInit.js";
+
+/**
+ * Merges refs into a single memoized callback ref or `null`.
+ * This makes sure multiple refs are updated together and have the same value.
+ *
+ * This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
+ * use `useMergedRefsN` instead.
+ */
+
+export function useMergedRefs(a, b, c, d) {
+  const forkRef = useRefWithInit(createForkRef).current;
+  if (didChange(forkRef, a, b, c, d)) {
+    update(forkRef, [a, b, c, d]);
+  }
+  return forkRef.callback;
+}
+
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ *
+ * If you need to merge a fixed number (up to four) of refs, use `useMergedRefs` instead for better performance.
+ */
+export function useMergedRefsN(refs) {
+  const forkRef = useRefWithInit(createForkRef).current;
+  if (didChangeN(forkRef, refs)) {
+    update(forkRef, refs);
+  }
+  return forkRef.callback;
+}
+function createForkRef() {
+  return {
+    callback: null,
+    cleanup: null,
+    refs: []
+  };
+}
+function didChange(forkRef, a, b, c, d) {
+  // prettier-ignore
+  return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
+}
+function didChangeN(forkRef, newRefs) {
+  return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
+}
+function update(forkRef, refs) {
+  forkRef.refs = refs;
+  if (refs.every(ref => ref == null)) {
+    forkRef.callback = null;
+    return;
+  }
+  forkRef.callback = instance => {
+    if (forkRef.cleanup) {
+      forkRef.cleanup();
+      forkRef.cleanup = null;
+    }
+    if (instance != null) {
+      const cleanupCallbacks = Array(refs.length).fill(null);
+      for (let i = 0; i < refs.length; i += 1) {
+        const ref = refs[i];
+        if (ref == null) {
+          continue;
+        }
+        switch (typeof ref) {
+          case 'function':
+            {
+              const refCleanup = ref(instance);
+              if (typeof refCleanup === 'function') {
+                cleanupCallbacks[i] = refCleanup;
+              }
+              break;
+            }
+          case 'object':
+            {
+              ref.current = instance;
+              break;
+            }
+          default:
+        }
+      }
+      forkRef.cleanup = () => {
+        for (let i = 0; i < refs.length; i += 1) {
+          const ref = refs[i];
+          if (ref == null) {
+            continue;
+          }
+          switch (typeof ref) {
+            case 'function':
+              {
+                const cleanupCallback = cleanupCallbacks[i];
+                if (typeof cleanupCallback === 'function') {
+                  cleanupCallback();
+                } else {
+                  ref(null);
+                }
+                break;
+              }
+            case 'object':
+              {
+                ref.current = null;
+                break;
+              }
+            default:
+          }
+        }
+      };
+    }
+  };
+}

package/esm/useOnFirstRender.d.ts

@@ -0,0 +1 @@
+export declare function useOnFirstRender(fn: Function): void;

package/esm/useOnFirstRender.js

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+export function useOnFirstRender(fn) {
+  const ref = React.useRef(true);
+  if (ref.current) {
+    ref.current = false;
+    fn();
+  }
+}

package/esm/useOnMount.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * A React.useEffect equivalent that runs once, when the component is mounted.
+ */
+export declare function useOnMount(fn: React.EffectCallback): void;

package/esm/useOnMount.js

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+const EMPTY = [];
+
+/**
+ * A React.useEffect equivalent that runs once, when the component is mounted.
+ */
+export function useOnMount(fn) {
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- no need to put `fn` in the dependency array
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(fn, EMPTY);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}

package/esm/usePreviousValue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a previous value of its argument.
+ * @param value Current value.
+ * @returns Previous value, or null if there is no previous value.
+ */
+export declare function usePreviousValue<T>(value: T): T | null;

package/esm/usePreviousValue.js

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * Returns a previous value of its argument.
+ * @param value Current value.
+ * @returns Previous value, or null if there is no previous value.
+ */
+export function usePreviousValue(value) {
+  const [state, setState] = React.useState({
+    current: value,
+    previous: null
+  });
+  if (value !== state.current) {
+    setState({
+      current: value,
+      previous: state.current
+    });
+  }
+  return state.previous;
+}

package/esm/useRefWithInit.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * A React.useRef() that is initialized with a function. Note that it accepts an optional
+ * initialization argument, so the initialization function doesn't need to be an inline closure.
+ *
+ * @usage
+ *   const ref = useRefWithInit(sortColumns, columns)
+ */
+export declare function useRefWithInit<T>(init: () => T): React.RefObject<T>;
+export declare function useRefWithInit<T, U>(init: (arg: U) => T, initArg: U): React.RefObject<T>;

package/esm/useRefWithInit.js

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+const UNINITIALIZED = {};
+
+/**
+ * A React.useRef() that is initialized with a function. Note that it accepts an optional
+ * initialization argument, so the initialization function doesn't need to be an inline closure.
+ *
+ * @usage
+ *   const ref = useRefWithInit(sortColumns, columns)
+ */
+
+export function useRefWithInit(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}

package/esm/useScrollLock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Locks the scroll of the document when enabled.
+ *
+ * @param enabled - Whether to enable the scroll lock.
+ * @param referenceElement - Element to use as a reference for lock calculations.
+ */
+export declare function useScrollLock(enabled?: boolean, referenceElement?: Element | null): void;

package/esm/useScrollLock.js

@@ -0,0 +1,244 @@
+'use client';
+
+import { isOverflowElement } from '@floating-ui/utils/dom';
+import { isIOS, isWebKit } from "./detectBrowser.js";
+import { ownerDocument, ownerWindow } from "./owner.js";
+import { useIsoLayoutEffect } from "./useIsoLayoutEffect.js";
+import { Timeout } from "./useTimeout.js";
+import { AnimationFrame } from "./useAnimationFrame.js";
+import { NOOP } from "./empty.js";
+let originalHtmlStyles = {};
+let originalBodyStyles = {};
+let originalHtmlScrollBehavior = '';
+function hasInsetScrollbars(referenceElement) {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+  const doc = ownerDocument(referenceElement);
+  const win = ownerWindow(doc);
+  return win.innerWidth - doc.documentElement.clientWidth > 0;
+}
+function supportsStableScrollbarGutter(referenceElement) {
+  const supported = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('scrollbar-gutter', 'stable');
+  if (!supported || typeof document === 'undefined') {
+    return false;
+  }
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+  const scrollContainer = isOverflowElement(html) ? html : body;
+  const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
+  const originalHtmlStyleGutter = html.style.scrollbarGutter;
+  html.style.scrollbarGutter = 'stable';
+  scrollContainer.style.overflowY = 'scroll';
+  const before = scrollContainer.offsetWidth;
+  scrollContainer.style.overflowY = 'hidden';
+  const after = scrollContainer.offsetWidth;
+  scrollContainer.style.overflowY = originalScrollContainerOverflowY;
+  html.style.scrollbarGutter = originalHtmlStyleGutter;
+  return before === after;
+}
+function preventScrollOverlayScrollbars(referenceElement) {
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+
+  // If an `overflow` style is present on <html>, we need to lock it, because a lock on <body>
+  // won't have any effect.
+  // But if <body> has an `overflow` style (like `overflow-x: hidden`), we need to lock it
+  // instead, as sticky elements shift otherwise.
+  const elementToLock = isOverflowElement(html) ? html : body;
+  const originalElementToLockStyles = {
+    overflowY: elementToLock.style.overflowY,
+    overflowX: elementToLock.style.overflowX
+  };
+  Object.assign(elementToLock.style, {
+    overflowY: 'hidden',
+    overflowX: 'hidden'
+  });
+  return () => {
+    Object.assign(elementToLock.style, originalElementToLockStyles);
+  };
+}
+function preventScrollInsetScrollbars(referenceElement) {
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+  const win = ownerWindow(html);
+  let scrollTop = 0;
+  let scrollLeft = 0;
+  let updateGutterOnly = false;
+  const resizeFrame = AnimationFrame.create();
+
+  // Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom.
+  if (isWebKit && (win.visualViewport?.scale ?? 1) !== 1) {
+    return () => {};
+  }
+  function lockScroll() {
+    /* DOM reads: */
+
+    const htmlStyles = win.getComputedStyle(html);
+    const bodyStyles = win.getComputedStyle(body);
+    const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || '';
+    const hasBothEdges = htmlScrollbarGutterValue.includes('both-edges');
+    const scrollbarGutterValue = hasBothEdges ? 'stable both-edges' : 'stable';
+    scrollTop = html.scrollTop;
+    scrollLeft = html.scrollLeft;
+    originalHtmlStyles = {
+      scrollbarGutter: html.style.scrollbarGutter,
+      overflowY: html.style.overflowY,
+      overflowX: html.style.overflowX
+    };
+    originalHtmlScrollBehavior = html.style.scrollBehavior;
+    originalBodyStyles = {
+      position: body.style.position,
+      height: body.style.height,
+      width: body.style.width,
+      boxSizing: body.style.boxSizing,
+      overflowY: body.style.overflowY,
+      overflowX: body.style.overflowX,
+      scrollBehavior: body.style.scrollBehavior
+    };
+    const isScrollableY = html.scrollHeight > html.clientHeight;
+    const isScrollableX = html.scrollWidth > html.clientWidth;
+    const hasConstantOverflowY = htmlStyles.overflowY === 'scroll' || bodyStyles.overflowY === 'scroll';
+    const hasConstantOverflowX = htmlStyles.overflowX === 'scroll' || bodyStyles.overflowX === 'scroll';
+
+    // Values can be negative in Firefox
+    const scrollbarWidth = Math.max(0, win.innerWidth - body.clientWidth);
+    const scrollbarHeight = Math.max(0, win.innerHeight - body.clientHeight);
+
+    // Avoid shift due to the default <body> margin. This does cause elements to be clipped
+    // with whitespace. Warn if <body> has margins?
+    const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
+    const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
+    const elementToLock = isOverflowElement(html) ? html : body;
+    updateGutterOnly = supportsStableScrollbarGutter(referenceElement);
+
+    /*
+     * DOM writes:
+     * Do not read the DOM past this point!
+     */
+
+    if (updateGutterOnly) {
+      html.style.scrollbarGutter = scrollbarGutterValue;
+      elementToLock.style.overflowY = 'hidden';
+      elementToLock.style.overflowX = 'hidden';
+      return;
+    }
+    Object.assign(html.style, {
+      scrollbarGutter: scrollbarGutterValue,
+      overflowY: 'hidden',
+      overflowX: 'hidden'
+    });
+    if (isScrollableY || hasConstantOverflowY) {
+      html.style.overflowY = 'scroll';
+    }
+    if (isScrollableX || hasConstantOverflowX) {
+      html.style.overflowX = 'scroll';
+    }
+    Object.assign(body.style, {
+      position: 'relative',
+      height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : '100dvh',
+      width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : '100vw',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      scrollBehavior: 'unset'
+    });
+    body.scrollTop = scrollTop;
+    body.scrollLeft = scrollLeft;
+    html.setAttribute('data-tale-ui-scroll-locked', '');
+    html.style.scrollBehavior = 'unset';
+  }
+  function cleanup() {
+    Object.assign(html.style, originalHtmlStyles);
+    Object.assign(body.style, originalBodyStyles);
+    if (!updateGutterOnly) {
+      html.scrollTop = scrollTop;
+      html.scrollLeft = scrollLeft;
+      html.removeAttribute('data-tale-ui-scroll-locked');
+      html.style.scrollBehavior = originalHtmlScrollBehavior;
+    }
+  }
+  function handleResize() {
+    cleanup();
+    resizeFrame.request(lockScroll);
+  }
+  lockScroll();
+  win.addEventListener('resize', handleResize);
+  return () => {
+    resizeFrame.cancel();
+    cleanup();
+    // Sometimes this cleanup can be run after test teardown
+    // because it is called in a `setTimeout(fn, 0)`,
+    // in which case `removeEventListener` wouldn't be available,
+    // so we check for it to avoid test failures.
+    if (typeof win.removeEventListener === 'function') {
+      win.removeEventListener('resize', handleResize);
+    }
+  };
+}
+class ScrollLocker {
+  lockCount = 0;
+  restore = null;
+  timeoutLock = Timeout.create();
+  timeoutUnlock = Timeout.create();
+  acquire(referenceElement) {
+    this.lockCount += 1;
+    if (this.lockCount === 1 && this.restore === null) {
+      this.timeoutLock.start(0, () => this.lock(referenceElement));
+    }
+    return this.release;
+  }
+  release = () => {
+    this.lockCount -= 1;
+    if (this.lockCount === 0 && this.restore) {
+      this.timeoutUnlock.start(0, this.unlock);
+    }
+  };
+  unlock = () => {
+    if (this.lockCount === 0 && this.restore) {
+      this.restore?.();
+      this.restore = null;
+    }
+  };
+  lock(referenceElement) {
+    if (this.lockCount === 0 || this.restore !== null) {
+      return;
+    }
+    const doc = ownerDocument(referenceElement);
+    const html = doc.documentElement;
+    const htmlOverflowY = ownerWindow(html).getComputedStyle(html).overflowY;
+
+    // If the site author already hid overflow on <html>, respect it and bail out.
+    if (htmlOverflowY === 'hidden' || htmlOverflowY === 'clip') {
+      this.restore = NOOP;
+      return;
+    }
+    const hasOverlayScrollbars = isIOS || !hasInsetScrollbars(referenceElement);
+
+    // On iOS, scroll locking does not work if the navbar is collapsed. Due to numerous
+    // side effects and bugs that arise on iOS, it must be researched extensively before
+    // being enabled to ensure it doesn't cause the following issues:
+    // - Textboxes must scroll into view when focused, nor cause a glitchy scroll animation.
+    // - The navbar must not force itself into view and cause layout shift.
+    // - Scroll containers must not flicker upon closing a popup when it has an exit animation.
+    this.restore = hasOverlayScrollbars ? preventScrollOverlayScrollbars(referenceElement) : preventScrollInsetScrollbars(referenceElement);
+  }
+}
+const SCROLL_LOCKER = new ScrollLocker();
+
+/**
+ * Locks the scroll of the document when enabled.
+ *
+ * @param enabled - Whether to enable the scroll lock.
+ * @param referenceElement - Element to use as a reference for lock calculations.
+ */
+export function useScrollLock(enabled = true, referenceElement = null) {
+  useIsoLayoutEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return SCROLL_LOCKER.acquire(referenceElement);
+  }, [enabled, referenceElement]);
+}

package/esm/useStableCallback.d.ts

@@ -0,0 +1,13 @@
+type Callback = (...args: any[]) => any;
+/**
+ * Stabilizes the function passed so it's always the same between renders.
+ *
+ * The function becomes non-reactive to any values it captures.
+ * It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
+ *
+ * The function must only be called inside effects and event handlers, never during render (which throws an error).
+ *
+ * This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
+ */
+export declare function useStableCallback<T extends Callback>(callback: T | undefined): T;
+export {};

package/esm/useStableCallback.js

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { useRefWithInit } from "./useRefWithInit.js";
+
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const useInsertionEffect = React[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)];
+const useSafeInsertionEffect =
+// React 17 doesn't have useInsertionEffect.
+useInsertionEffect &&
+// Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+useInsertionEffect !== React.useLayoutEffect ? useInsertionEffect : fn => fn();
+/**
+ * Stabilizes the function passed so it's always the same between renders.
+ *
+ * The function becomes non-reactive to any values it captures.
+ * It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
+ *
+ * The function must only be called inside effects and event handlers, never during render (which throws an error).
+ *
+ * This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
+ */
+export function useStableCallback(callback) {
+  const stable = useRefWithInit(createStableCallback).current;
+  stable.next = callback;
+  useSafeInsertionEffect(stable.effect);
+  return stable.trampoline;
+}
+function createStableCallback() {
+  const stable = {
+    next: undefined,
+    callback: assertNotCalled,
+    trampoline: (...args) => stable.callback?.(...args),
+    effect: () => {
+      stable.callback = stable.next;
+    }
+  };
+  return stable;
+}
+function assertNotCalled() {
+  if (process.env.NODE_ENV !== 'production') {
+    throw /* minify-error-disabled */new Error('Tale UI: Cannot call an event handler while rendering.');
+  }
+}

package/esm/useTimeout.d.ts

@@ -0,0 +1,17 @@
+type TimeoutId = number;
+export declare class Timeout {
+  static create(): Timeout;
+  currentId: TimeoutId;
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay: number, fn: Function): void;
+  isStarted(): boolean;
+  clear: () => void;
+  disposeEffect: () => () => void;
+}
+/**
+ * A `setTimeout` with automatic cleanup and guard.
+ */
+export declare function useTimeout(): Timeout;
+export {};

package/esm/useTimeout.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { useRefWithInit } from "./useRefWithInit.js";
+import { useOnMount } from "./useOnMount.js";
+const EMPTY = 0;
+export class Timeout {
+  static create() {
+    return new Timeout();
+  }
+  currentId = EMPTY;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = EMPTY;
+      fn();
+    }, delay); /* Node.js types are enabled in development */
+  }
+  isStarted() {
+    return this.currentId !== EMPTY;
+  }
+  clear = () => {
+    if (this.currentId !== EMPTY) {
+      clearTimeout(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+
+/**
+ * A `setTimeout` with automatic cleanup and guard.
+ */
+export function useTimeout() {
+  const timeout = useRefWithInit(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}

package/esm/useValueAsRef.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Untracks the provided value by turning it into a ref to remove its reactivity.
+ *
+ * Used to access the passed value inside `React.useEffect` without causing the effect to re-run when the value changes.
+ */
+export declare function useValueAsRef<T>(value: T): {
+  current: T;
+  next: T;
+  effect: () => void;
+};

package/esm/useValueAsRef.js

@@ -0,0 +1,28 @@
+'use client';
+
+import { useIsoLayoutEffect } from "./useIsoLayoutEffect.js";
+import { useRefWithInit } from "./useRefWithInit.js";
+
+/**
+ * Untracks the provided value by turning it into a ref to remove its reactivity.
+ *
+ * Used to access the passed value inside `React.useEffect` without causing the effect to re-run when the value changes.
+ */
+export function useValueAsRef(value) {
+  const latest = useRefWithInit(createLatestRef, value).current;
+  latest.next = value;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useIsoLayoutEffect(latest.effect);
+  return latest;
+}
+function createLatestRef(value) {
+  const latest = {
+    current: value,
+    next: value,
+    effect: () => {
+      latest.current = latest.next;
+    }
+  };
+  return latest;
+}

package/esm/visuallyHidden.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const visuallyHidden: React.CSSProperties;
+export declare const visuallyHiddenInput: React.CSSProperties;

package/esm/visuallyHidden.js

@@ -0,0 +1,20 @@
+const visuallyHiddenBase = {
+  clipPath: 'inset(50%)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1
+};
+export const visuallyHidden = {
+  ...visuallyHiddenBase,
+  position: 'fixed',
+  top: 0,
+  left: 0
+};
+export const visuallyHiddenInput = {
+  ...visuallyHiddenBase,
+  position: 'absolute'
+};

package/esm/warn.d.ts

@@ -0,0 +1 @@
+export declare function warn(...messages: string[]): void;

package/esm/warn.js

@@ -0,0 +1,13 @@
+let set;
+if (process.env.NODE_ENV !== 'production') {
+  set = new Set();
+}
+export function warn(...messages) {
+  if (process.env.NODE_ENV !== 'production') {
+    const messageKey = messages.join(' ');
+    if (!set.has(messageKey)) {
+      set.add(messageKey);
+      console.warn(`Tale UI: ${messageKey}`);
+    }
+  }
+}

package/fastHooks.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type Instance = {
+  didInitialize: boolean;
+};
+type HookType = {
+  before: (instance: any) => void;
+  after: (instance: any) => void;
+};
+export declare function getInstance(): Instance | undefined;
+export declare function setInstance(instance: Instance | undefined): void;
+export declare function register(hook: HookType): void;
+export declare function fastComponent<P extends object, E extends HTMLElement, R extends React.ReactNode>(fn: (props: P) => R): typeof fn;
+export declare function fastComponentRef<P extends object, E extends Element, R extends React.ReactNode>(fn: (props: React.PropsWithoutRef<P>, forwardedRef: React.Ref<E>) => R): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<E>>;
+export {};