@react-aria/utils 3.0.0-nightly-641446f65-240905

package/src/useDrag1D.ts

@@ -0,0 +1,190 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+ /* eslint-disable rulesdir/pure-render */
+
+import {getOffset} from './getOffset';
+import {Orientation} from '@react-types/shared';
+import React, {HTMLAttributes, MutableRefObject, useRef} from 'react';
+
+interface UseDrag1DProps {
+  containerRef: MutableRefObject<HTMLElement>,
+  reverse?: boolean,
+  orientation?: Orientation,
+  onHover?: (hovered: boolean) => void,
+  onDrag?: (dragging: boolean) => void,
+  onPositionChange?: (position: number) => void,
+  onIncrement?: () => void,
+  onDecrement?: () => void,
+  onIncrementToMax?: () => void,
+  onDecrementToMin?: () => void,
+  onCollapseToggle?: () => void
+}
+
+// Keep track of elements that we are currently handling dragging for via useDrag1D.
+// If there's an ancestor and a descendant both using useDrag1D(), and the user starts
+// dragging the descendant, we don't want useDrag1D events to fire for the ancestor.
+const draggingElements: HTMLElement[] = [];
+
+// created for splitview, this should be reusable for things like sliders/dials
+// It also handles keyboard events on the target allowing for increment/decrement by a given stepsize as well as minifying/maximizing and toggling between minified and previous size
+// It can also take a 'reverse' param to say if we should measure from the right/bottom instead of the top/left
+// It can also handle either a vertical or horizontal movement, but not both at the same time
+
+export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
+  console.warn('useDrag1D is deprecated, please use `useMove` instead https://react-spectrum.adobe.com/react-aria/useMove.html');
+  let {containerRef, reverse, orientation, onHover, onDrag, onPositionChange, onIncrement, onDecrement, onIncrementToMax, onDecrementToMin, onCollapseToggle} = props;
+  let getPosition = (e) => orientation === 'horizontal' ? e.clientX : e.clientY;
+  let getNextOffset = (e: MouseEvent) => {
+    let containerOffset = getOffset(containerRef.current, reverse, orientation);
+    let mouseOffset = getPosition(e);
+    let nextOffset = reverse ? containerOffset - mouseOffset : mouseOffset - containerOffset;
+    return nextOffset;
+  };
+  let dragging = useRef(false);
+  let prevPosition = useRef(0);
+
+  // Keep track of the current handlers in a ref so that the events can access them.
+  let handlers = useRef({onPositionChange, onDrag});
+  handlers.current.onDrag = onDrag;
+  handlers.current.onPositionChange = onPositionChange;
+
+  let onMouseDragged = (e: MouseEvent) => {
+    e.preventDefault();
+    let nextOffset = getNextOffset(e);
+    if (!dragging.current) {
+      dragging.current = true;
+      if (handlers.current.onDrag) {
+        handlers.current.onDrag(true);
+      }
+      if (handlers.current.onPositionChange) {
+        handlers.current.onPositionChange(nextOffset);
+      }
+    }
+    if (prevPosition.current === nextOffset) {
+      return;
+    }
+    prevPosition.current = nextOffset;
+    if (onPositionChange) {
+      onPositionChange(nextOffset);
+    }
+  };
+
+  let onMouseUp = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    dragging.current = false;
+    let nextOffset = getNextOffset(e);
+    if (handlers.current.onDrag) {
+      handlers.current.onDrag(false);
+    }
+    if (handlers.current.onPositionChange) {
+      handlers.current.onPositionChange(nextOffset);
+    }
+
+    draggingElements.splice(draggingElements.indexOf(target), 1);
+    window.removeEventListener('mouseup', onMouseUp, false);
+    window.removeEventListener('mousemove', onMouseDragged, false);
+  };
+
+  let onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.currentTarget;
+    // If we're already handling dragging on a descendant with useDrag1D, then
+    // we don't want to handle the drag motion on this target as well.
+    if (draggingElements.some(elt => target.contains(elt))) {
+      return;
+    }
+    draggingElements.push(target);
+    window.addEventListener('mousemove', onMouseDragged, false);
+    window.addEventListener('mouseup', onMouseUp, false);
+  };
+
+  let onMouseEnter = () => {
+    if (onHover) {
+      onHover(true);
+    }
+  };
+
+  let onMouseOut = () => {
+    if (onHover) {
+      onHover(false);
+    }
+  };
+
+  let onKeyDown = (e) => {
+    switch (e.key) {
+      case 'Left':
+      case 'ArrowLeft':
+        if (orientation === 'horizontal') {
+          e.preventDefault();
+          if (onDecrement && !reverse) {
+            onDecrement();
+          } else if (onIncrement && reverse) {
+            onIncrement();
+          }
+        }
+        break;
+      case 'Up':
+      case 'ArrowUp':
+        if (orientation === 'vertical') {
+          e.preventDefault();
+          if (onDecrement && !reverse) {
+            onDecrement();
+          } else if (onIncrement && reverse) {
+            onIncrement();
+          }
+        }
+        break;
+      case 'Right':
+      case 'ArrowRight':
+        if (orientation === 'horizontal') {
+          e.preventDefault();
+          if (onIncrement && !reverse) {
+            onIncrement();
+          } else if (onDecrement && reverse) {
+            onDecrement();
+          }
+        }
+        break;
+      case 'Down':
+      case 'ArrowDown':
+        if (orientation === 'vertical') {
+          e.preventDefault();
+          if (onIncrement && !reverse) {
+            onIncrement();
+          } else if (onDecrement && reverse) {
+            onDecrement();
+          }
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        if (onDecrementToMin) {
+          onDecrementToMin();
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        if (onIncrementToMax) {
+          onIncrementToMax();
+        }
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (onCollapseToggle) {
+          onCollapseToggle();
+        }
+        break;
+    }
+  };
+
+  return {onMouseDown, onMouseEnter, onMouseOut, onKeyDown};
+}

package/src/useEffectEvent.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useCallback, useRef} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+
+export function useEffectEvent<T extends Function>(fn?: T): T {
+  const ref = useRef<T | null | undefined>(null);
+  useLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  // @ts-ignore
+  return useCallback<T>((...args) => {
+    const f = ref.current!;
+    return f?.(...args);
+  }, []);
+}

package/src/useEvent.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject} from '@react-types/shared';
+import {useEffect} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+
+export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
+  ref: RefObject<EventTarget | null>,
+  event: K | (string & {}),
+  handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  let handleEvent = useEffectEvent(handler);
+  let isDisabled = handler == null;
+
+  useEffect(() => {
+    if (isDisabled || !ref.current) {
+      return;
+    }
+
+    let element = ref.current;
+    element.addEventListener(event, handleEvent as EventListener, options);
+    return () => {
+      element.removeEventListener(event, handleEvent as EventListener, options);
+    };
+  }, [ref, event, options, isDisabled, handleEvent]);
+}

package/src/useFormReset.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject} from '@react-types/shared';
+import {useEffect, useRef} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+
+export function useFormReset<T>(
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>,
+  initialValue: T,
+  onReset: (value: T) => void
+) {
+  let resetValue = useRef(initialValue);
+  let handleReset = useEffectEvent(() => {
+    if (onReset) {
+      onReset(resetValue.current);
+    }
+  });
+
+  useEffect(() => {
+    let form = ref?.current?.form;
+    form?.addEventListener('reset', handleReset);
+    return () => {
+      form?.removeEventListener('reset', handleReset);
+    };
+  }, [ref, handleReset]);
+}

package/src/useGlobalListeners.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useCallback, useEffect, useRef} from 'react';
+
+interface GlobalListeners {
+  addGlobalListener<K extends keyof DocumentEventMap>(el: EventTarget, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void,
+  addGlobalListener(el: EventTarget, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void,
+  removeGlobalListener<K extends keyof DocumentEventMap>(el: EventTarget, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void,
+  removeGlobalListener(el: EventTarget, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void,
+  removeAllGlobalListeners(): void
+}
+
+export function useGlobalListeners(): GlobalListeners {
+  let globalListeners = useRef(new Map());
+  let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
+    // Make sure we remove the listener after it is called with the `once` option.
+    let fn = options?.once ? (...args) => {
+      globalListeners.current.delete(listener);
+      listener(...args);
+    } : listener;
+    globalListeners.current.set(listener, {type, eventTarget, fn, options});
+    eventTarget.addEventListener(type, listener, options);
+  }, []);
+  let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
+    let fn = globalListeners.current.get(listener)?.fn || listener;
+    eventTarget.removeEventListener(type, fn, options);
+    globalListeners.current.delete(listener);
+  }, []);
+  let removeAllGlobalListeners = useCallback(() => {
+    globalListeners.current.forEach((value, key) => {
+      removeGlobalListener(value.eventTarget, value.type, key, value.options);
+    });
+  }, [removeGlobalListener]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return removeAllGlobalListeners;
+  }, [removeAllGlobalListeners]);
+
+  return {addGlobalListener, removeGlobalListener, removeAllGlobalListeners};
+}

package/src/useId.ts

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+import {useSSRSafeId} from '@react-aria/ssr';
+import {useValueEffect} from './';
+
+// copied from SSRProvider.tsx to reduce exports, if needed again, consider sharing
+let canUseDOM = Boolean(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+let idsUpdaterMap: Map<string, (v: string) => void> = new Map();
+
+/**
+ * If a default is not provided, generate an id.
+ * @param defaultId - Default component id.
+ */
+export function useId(defaultId?: string): string {
+  let [value, setValue] = useState(defaultId);
+  let nextId = useRef(null);
+
+  let res = useSSRSafeId(value);
+
+  let updateValue = useCallback((val) => {
+    nextId.current = val;
+  }, []);
+
+  if (canUseDOM) {
+    idsUpdaterMap.set(res, updateValue);
+  }
+
+  useLayoutEffect(() => {
+    let r = res;
+    return () => {
+      idsUpdaterMap.delete(r);
+    };
+  }, [res]);
+
+  // This cannot cause an infinite loop because the ref is updated first.
+  // eslint-disable-next-line
+  useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+
+  return res;
+}
+
+/**
+ * Merges two ids.
+ * Different ids will trigger a side-effect and re-render components hooked up with `useId`.
+ */
+export function mergeIds(idA: string, idB: string): string {
+  if (idA === idB) {
+    return idA;
+  }
+
+  let setIdA = idsUpdaterMap.get(idA);
+  if (setIdA) {
+    setIdA(idB);
+    return idB;
+  }
+
+  let setIdB = idsUpdaterMap.get(idB);
+  if (setIdB) {
+    setIdB(idA);
+    return idA;
+  }
+
+  return idB;
+}
+
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ * @param depArray - When to recalculate if the id is in the DOM.
+ */
+export function useSlotId(depArray: ReadonlyArray<any> = []): string {
+  let id = useId();
+  let [resolvedId, setResolvedId] = useValueEffect(id);
+  let updateId = useCallback(() => {
+    setResolvedId(function *() {
+      yield id;
+
+      yield document.getElementById(id) ? id : undefined;
+    });
+  }, [id, setResolvedId]);
+
+  useLayoutEffect(updateId, [id, updateId, ...depArray]);
+
+  return resolvedId;
+}

package/src/useLabels.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps} from '@react-types/shared';
+import {useId} from './useId';
+
+/**
+ * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+ * @param props - Aria label props.
+ * @param defaultLabel - Default value for aria-label when not present.
+ */
+export function useLabels(props: DOMProps & AriaLabelingProps, defaultLabel?: string): DOMProps & AriaLabelingProps {
+  let {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  } = props;
+
+  // If there is both an aria-label and aria-labelledby,
+  // combine them by pointing to the element itself.
+  id = useId(id);
+  if (labelledBy && label) {
+    let ids = new Set([id, ...labelledBy.trim().split(/\s+/)]);
+    labelledBy = [...ids].join(' ');
+  } else if (labelledBy) {
+    labelledBy = labelledBy.trim().split(/\s+/).join(' ');
+  }
+
+  // If no labels are provided, use the default
+  if (!label && !labelledBy && defaultLabel) {
+    label = defaultLabel;
+  }
+
+  return {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  };
+}

package/src/useLayoutEffect.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+export const useLayoutEffect = typeof document !== 'undefined'
+  ? React.useLayoutEffect
+  : () => {};

package/src/useLoadMore.ts

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefObject, useCallback, useRef} from 'react';
+import {useEvent} from './useEvent';
+// eslint-disable-next-line rulesdir/useLayoutEffectRule
+import {useLayoutEffect} from './useLayoutEffect';
+
+export interface LoadMoreProps {
+  /** Whether data is currently being loaded. */
+  isLoading?: boolean,
+  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.  */
+  onLoadMore?: () => void,
+  /**
+   * The amount of offset from the bottom of your scrollable region that should trigger load more.
+   * Uses a percentage value relative to the scroll body's client height. Load more is then triggered
+   * when your current scroll position's distance from the bottom of the currently loaded list of items is less than
+   * or equal to the provided value. (e.g. 1 = 100% of the scroll region's height).
+   * @default 1
+   */
+  scrollOffset?: number,
+  /** The data currently loaded. */
+  items?: any[]
+}
+
+export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | null>) {
+  let {isLoading, onLoadMore, scrollOffset = 1, items} = props;
+
+  // Handle scrolling, and call onLoadMore when nearing the bottom.
+  let isLoadingRef = useRef(isLoading);
+  let prevProps = useRef(props);
+  let onScroll = useCallback(() => {
+    if (ref.current && !isLoadingRef.current && onLoadMore) {
+      let shouldLoadMore = ref.current.scrollHeight - ref.current.scrollTop - ref.current.clientHeight < ref.current.clientHeight * scrollOffset;
+
+      if (shouldLoadMore) {
+        isLoadingRef.current = true;
+        onLoadMore();
+      }
+    }
+  }, [onLoadMore, ref, scrollOffset]);
+
+  let lastItems = useRef(items);
+  useLayoutEffect(() => {
+    // Only update isLoadingRef if props object actually changed,
+    // not if a local state change occurred.
+    if (props !== prevProps.current) {
+      isLoadingRef.current = isLoading;
+      prevProps.current = props;
+    }
+
+    // TODO: Eventually this hook will move back into RAC during which we will accept the collection as a option to this hook.
+    // We will only load more if the collection has changed after the last load to prevent multiple onLoadMore from being called
+    // while the data from the last onLoadMore is being processed by RAC collection.
+    let shouldLoadMore = ref?.current
+      && !isLoadingRef.current
+      && onLoadMore
+      && (!items || items !== lastItems.current)
+      && ref.current.clientHeight === ref.current.scrollHeight;
+
+    if (shouldLoadMore) {
+      isLoadingRef.current = true;
+      onLoadMore?.();
+    }
+
+    lastItems.current = items;
+  }, [isLoading, onLoadMore, props, ref]);
+
+  // TODO: maybe this should still just return scroll props?
+  // Test against case where the ref isn't defined when this is called
+  // Think this was a problem when trying to attach to the scrollable body of the table in OnLoadMoreTableBodyScroll
+  useEvent(ref, 'scroll', onScroll);
+}

package/src/useObjectRef.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {MutableRefObject, useMemo, useRef} from 'react';
+
+/**
+ * Offers an object ref for a given callback ref or an object ref. Especially
+ * helfpul when passing forwarded refs (created using `React.forwardRef`) to
+ * React Aria hooks.
+ *
+ * @param forwardedRef The original ref intended to be used.
+ * @returns An object ref that updates the given ref.
+ * @see https://reactjs.org/docs/forwarding-refs.html
+ */
+export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T | null> {
+  const objRef: MutableRefObject<T | null> = useRef<T>(null);
+  return useMemo(() => ({
+    get current() {
+      return objRef.current;
+    },
+    set current(value) {
+      objRef.current = value;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(value);
+      } else if (forwardedRef) {
+        forwardedRef.current = value;
+      }
+    }
+  }), [forwardedRef]);
+}