@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/View/useLayoutEffectCall.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+
+class LayoutEffectCall {
+  #fns: Array<() => void> = [];
+
+  /**
+   * Выполняет переданные функции
+   */
+  run() {
+    for (const fn of this.#fns) {
+      fn();
+    }
+
+    this.#fns = [];
+  }
+
+  /**
+   * Вызовет функцию после изменения DOM, но до того как пользователь увидит
+   * изменения
+   */
+  add = (fn: () => void) => {
+    this.#fns.push(fn);
+  };
+}
+
+/**
+ * Возвращает функцию которая вызывает callback после изменения DOM, но до того
+ * как пользователь увидит изменения
+ */
+export function useLayoutEffectCall() {
+  const ref = React.useRef<LayoutEffectCall | null>(null);
+  if (!ref.current) {
+    ref.current = new LayoutEffectCall();
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current!.run();
+  });
+
+  return ref.current.add;
+}

package/src/components/View/utils.ts

@@ -3,13 +3,13 @@ import { TouchEvent } from '../Touch/Touch';
 
 const swipeBackExcludedSelector = 'input, textarea, [data-vkui-swipe-back=false]';
 
-export function swipeBackExcluded(e: TouchEvent) {
+export function swipeBackExcluded(e: TouchEvent): boolean {
   const target = e.originalEvent.target as HTMLElement;
   // eslint-disable-next-line no-restricted-properties
   return Boolean(target?.closest?.(swipeBackExcludedSelector));
 }
 
-export function hasHorizontalScrollableElementWithScrolledToLeft(node: HTMLElement) {
+export function hasHorizontalScrollableElementWithScrolledToLeft(node: HTMLElement): boolean {
   return getOverflowAncestors(node).some((node) =>
     'scrollLeft' in node ? node.scrollLeft > 0 : false,
   );
@@ -19,7 +19,16 @@ export const SWIPE_BACK_EDGE_SIZE_THRESHOLD = 20;
 
 export const SWIPE_BACK_SHIFT_THRESHOLD = 10;
 
-export const getSwipeBackPredicates = (startX: number, shiftX: number, innerWidth: number) => {
+export const getSwipeBackPredicates = (
+  startX: number,
+  shiftX: number,
+  innerWidth: number,
+): {
+  swipedToOpposite: boolean;
+  swipeBackTriggered: boolean;
+  viewportStartEdgeTouched: boolean;
+  viewportEndEdgeTouched: boolean;
+} => {
   const swipedToOpposite = shiftX < 0;
   const swipeBackTriggered = shiftX >= SWIPE_BACK_SHIFT_THRESHOLD;
   const viewportStartEdgeTouched = startX <= SWIPE_BACK_EDGE_SIZE_THRESHOLD;

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -14,7 +14,7 @@ export type VisuallyHiddenProps<T> = RootComponentProps<T>;
 export const VisuallyHidden = <T,>({
   Component = 'span',
   ...restProps
-}: VisuallyHiddenProps<T>) => (
+}: VisuallyHiddenProps<T>): React.ReactNode => (
   <RootComponent
     Component={Component}
     {...restProps}

package/src/components/WriteBar/WriteBar.module.css

@@ -104,6 +104,6 @@
 
 .WriteBar--ios .WriteBar__textarea {
   block-size: 36px;
-  padding-block: 6px 6px;
+  padding-block: 6px;
   padding-inline: 12px 0;
 }

package/src/components/WriteBar/WriteBar.tsx

@@ -63,7 +63,7 @@ export const WriteBar = ({
   shadow = false,
   onChange,
   ...restProps
-}: WriteBarProps) => {
+}: WriteBarProps): React.ReactNode => {
   const platform = usePlatform();
 
   const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -59,7 +59,7 @@ export const WriteBarIcon = ({
   className,
   label: labelProp,
   ...restProps
-}: WriteBarIconProps) => {
+}: WriteBarIconProps): React.ReactNode => {
   const platform = usePlatform();
 
   let predefinedIcons;

package/src/helpers/array.ts

@@ -0,0 +1,9 @@
+/**
+ * Сравнивает два массива
+ */
+export function arraysEquals<T>(arrA: T[], arrB: T[]) {
+  if (arrA.length !== arrB.length) {
+    return false;
+  }
+  return arrA.every((item, index) => item === arrB[index]);
+}

package/src/helpers/getMergedSameEventsByProps.ts

@@ -22,7 +22,11 @@ export const getMergedSameEventsByProps = <
 >(
   mainProps: MainProps,
   secondProps: React.ComponentProps<T>,
-) => {
+): {
+  [K in keyof OnlyFnPropsByMain]?:
+    | ((this: any, ...args: Parameters<OnlyFnPropsByMain[K]>) => void)
+    | undefined;
+} => {
   const result: {
     [K in keyof OnlyFnPropsByMain]?:
       | ((this: any, ...args: Parameters<OnlyFnPropsByMain[K]>) => void)

package/src/helpers/math.ts

@@ -1,7 +1,7 @@
-export const clamp = (value: number, min: number, max: number) =>
+export const clamp = (value: number, min: number, max: number): number =>
   Math.max(min, Math.min(value, max));
 
-export function precisionRound(number: number, precision = 1) {
+export function precisionRound(number: number, precision = 1): number {
   let factor = Math.pow(10, precision);
   return Math.round(number * factor) / factor;
 }
@@ -41,7 +41,7 @@ export function rescale(
   from: [number, number],
   to: [number, number],
   options: { step?: number } = {},
-) {
+): number {
   const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
   return decimatedClamp(scaled, to[0], to[1], options.step);
 }

package/src/helpers/range.ts

@@ -1,7 +1,7 @@
 /**
  * Генерирует массив с диапазоном чисел.
  */
-export function range(from: number, to: number, step = 1) {
+export function range(from: number, to: number, step = 1): number[] {
   const direction = from < to ? 1 : -1;
   const distance = Math.abs(from - to) + 1;
   const arrayLength = Math.ceil(distance / step);
@@ -17,7 +17,7 @@ export function range(from: number, to: number, step = 1) {
  * Генерирует массив с диапазоном чисел в порядке возрастания.
  * Если `from` меньше `to`, вернется пустой массив.
  */
-export function rangeIncrement(from: number, to: number, step = 1) {
+export function rangeIncrement(from: number, to: number, step = 1): number[] {
   if (from > to) {
     return [];
   }

package/src/hooks/useAdaptivityConditionalRender/constants.ts

@@ -1,26 +1,29 @@
 import styles from '../../styles/adaptivity.module.css';
 
-export const sizeXCompactClassNames = {
+export const sizeXCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeX--compact-mq'] },
   ['compact']: { className: styles['-sizeX--compact-forced'] },
 };
 
-export const sizeXRegularClassNames = {
+export const sizeXRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeX--regular-mq'] },
   ['regular']: { className: styles['-sizeX--regular-forced'] },
 };
 
-export const sizeYCompactClassNames = {
+export const sizeYCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeY--compact-mq'] },
   ['compact']: { className: styles['-sizeY--compact-forced'] },
 };
 
-export const sizeYRegularClassNames = {
+export const sizeYRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeY--regular-mq'] },
   ['regular']: { className: styles['-sizeY--regular-forced'] },
 };
 
-export const viewWidthClassNames = {
+export const viewWidthClassNames: Record<
+  'tabletMinus' | 'tabletPlus',
+  Record<'mq' | 'forced', { className: string }>
+> = {
   tabletMinus: {
     mq: { className: styles['-viewWidth--tabletMinus-mq'] },
     forced: { className: styles['-viewWidth--tabletMinus-forced'] },
@@ -31,7 +34,10 @@ export const viewWidthClassNames = {
   },
 };
 
-export const deviceTypeClassNames = {
+export const deviceTypeClassNames: Record<
+  'mobile' | 'desktop',
+  Record<'mq' | 'forced', { className: string }>
+> = {
   mobile: {
     mq: { className: styles['-deviceType--mobile-mq'] },
     forced: { className: styles['-deviceType--mobile-forced'] },

package/src/hooks/useAppearance.ts

@@ -1,7 +1,7 @@
 import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
-import { DEFAULT_APPEARANCE } from '../lib/appearance';
+import { AppearanceType, DEFAULT_APPEARANCE } from '../lib/appearance';
 
-export function useAppearance() {
+export function useAppearance(): AppearanceType {
   const { appearance } = useConfigProvider();
 
   return appearance ?? DEFAULT_APPEARANCE;

package/src/hooks/useAutoFocus.ts

@@ -4,7 +4,7 @@ import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 export function useAutoFocus(
   ref: React.RefObject<HTMLElement | null>,
   autoFocus: boolean | undefined,
-) {
+): void {
   useIsomorphicLayoutEffect(() => {
     if (!autoFocus || !ref.current) {
       return;

package/src/hooks/useBooleanState.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 
-export const useBooleanState = (defaultValue = false) => {
+export const useBooleanState = (
+  defaultValue = false,
+): {
+  value: boolean;
+  setTrue: () => void;
+  setFalse: () => void;
+  toggle: () => void;
+} => {
   const [value, setValue] = React.useState(defaultValue);
 
   const setTrue = React.useCallback(() => {

package/src/hooks/useCalendar.ts

@@ -36,7 +36,19 @@ export function useCalendar({
   onPrevMonth,
   minDateTime,
   maxDateTime,
-}: UseCalendarDependencies) {
+}: UseCalendarDependencies): {
+  viewDate: Date;
+  setViewDate: (value: Date) => void;
+  setPrevMonth: () => void;
+  setNextMonth: () => void;
+  focusedDay: Date | undefined;
+  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  isDayFocused: (day: Date) => boolean;
+  isDayDisabled: (day: Date, withTime?: boolean) => boolean;
+  resetSelectedDay: () => void;
+  isMonthDisabled: (month: number, year?: number) => boolean;
+  isYearDisabled: (year: number) => boolean;
+} {
   const [viewDate, setViewDate] = React.useState(
     (Array.isArray(value) ? value[0] : value) ?? new Date(),
   );

package/src/hooks/useDateInput.ts

@@ -29,7 +29,20 @@ export function useDateInput<T extends HTMLElement, D>({
   onInternalValueChange,
   getInternalValue,
   value,
-}: UseDateInputDependencies<T, D>) {
+}: UseDateInputDependencies<T, D>): {
+  rootRef: React.RefObject<HTMLDivElement>;
+  calendarRef: React.RefObject<HTMLDivElement>;
+  open: boolean;
+  openCalendar: () => void;
+  closeCalendar: () => void;
+  internalValue: string[];
+  focusedElement: number | null;
+  setFocusedElement: React.Dispatch<React.SetStateAction<number | null>>;
+  handleKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
+  clear: () => void;
+  handleFieldEnter: () => void;
+  removeFocusFromField: () => void;
+} {
   const { document } = useDOM();
   const { value: open, setTrue: openCalendar, setFalse: closeCalendar } = useBooleanState(false);
   const rootRef = React.useRef<HTMLDivElement>(null);

package/src/hooks/useDraggableWithDomApi/autoScroll.ts

@@ -4,7 +4,13 @@ import { rafSchd } from '../../lib/rafSchd';
 const SCROLL_SPEED = 10;
 export const EDGE_SIZE = 50;
 
-export const getAutoScrollingData = (clientY: number, scrollEl: Element | Window) => {
+export const getAutoScrollingData = (
+  clientY: number,
+  scrollEl: Element | Window,
+): {
+  shouldScrolling: boolean;
+  y: number;
+} => {
   const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);
 
   const { relative, edges } = getScrollRect(scrollEl);
@@ -37,7 +43,13 @@ export const getAutoScrollingData = (clientY: number, scrollEl: Element | Window
 
 export type AutoScrollingDataFn = () => { shouldScrolling: boolean; y: number };
 
-export const createAutoScrollController = (scrollEl: Element | Window) => {
+export const createAutoScrollController = (
+  scrollEl: Element | Window,
+): {
+  tryAutoScroll: (fn: AutoScrollingDataFn) => void;
+  stop: () => void;
+  readonly isRunning: boolean;
+} => {
   let isRunning = false;
   const scheduledScroll = rafSchd(scroll);
 

package/src/hooks/useDraggableWithDomApi/constants.ts

@@ -4,4 +4,6 @@ export const ITEM_INITIAL_INDEX = -1;
 
 export const DATA_DRAGGABLE_PLACEHOLDER_KEY = 'data-draggable-placeholder';
 
-export const DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP = { [DATA_DRAGGABLE_PLACEHOLDER_KEY]: 'true' };
+export const DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP: {
+  'data-draggable-placeholder': string;
+} = { [DATA_DRAGGABLE_PLACEHOLDER_KEY]: 'true' };

package/src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts

@@ -72,9 +72,13 @@ export const useDraggableWithDomApi = <T extends HTMLElement>({
   const draggingItemRef = React.useRef<DraggingItem | null>(null);
   const placeholderItemRef = React.useRef<PlaceholderItem | null>(null);
   const siblingItemsRef = React.useRef<SiblingItem[]>([]);
+  const itemsGapRef = React.useRef<number>(0);
   const initializeItems = (draggingEl: HTMLElement) => {
     const draggingElRect = getBoundingClientRect(draggingEl, true);
-    const { children } = draggingEl.parentElement || { children: [] };
+    const parentElement = draggingEl.parentElement;
+    itemsGapRef.current = parentElement ? parseInt(parentElement.style.gridGap) : 0;
+
+    const { children } = parentElement || { children: [] };
     Array.prototype.forEach.call(children, (el: HTMLElement, index) => {
       if (el === draggingEl) {
         itemStartIndexRef.current = itemEndIndexRef.current = index;
@@ -91,7 +95,9 @@ export const useDraggableWithDomApi = <T extends HTMLElement>({
     if (draggingItemRef.current) {
       setInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint
     }
-    siblingItemsRef.current.forEach(setInitialSiblingItemStyles); // 2. repaint
+    siblingItemsRef.current.forEach((sibling) =>
+      setInitialSiblingItemStyles(sibling, itemsGapRef.current),
+    ); // 2. repaint
   };
   const cleanupItems = () => {
     if (placeholderItemRef.current) {
@@ -155,8 +161,8 @@ export const useDraggableWithDomApi = <T extends HTMLElement>({
     shiftItemEls: Array<[SiblingItem, Direction]>,
     unshiftItemEls: Array<[SiblingItem, Direction]>,
   ) => {
-    shiftItemEls.forEach(setSiblingItemsShiftStyles);
-    unshiftItemEls.forEach(setSiblingItemsShiftStyles);
+    shiftItemEls.forEach((item) => setSiblingItemsShiftStyles(item, itemsGapRef.current));
+    unshiftItemEls.forEach((item) => setSiblingItemsShiftStyles(item, itemsGapRef.current));
   };
 
   const schedulingAutoScrollTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);

package/src/hooks/useDraggableWithDomApi/utils.ts

@@ -1,6 +1,12 @@
 import type { Direction, DraggingItem, PlaceholderItem, SiblingItem } from './types';
 
-export const getTargetIsOverOrUnderElData = (clientY: number, elRect: DOMRect) => {
+export const getTargetIsOverOrUnderElData = (
+  clientY: number,
+  elRect: DOMRect,
+): {
+  isUnderEl: boolean;
+  isOverEl: boolean;
+} => {
   const elRectHalfHeight = elRect.height / 2;
   return {
     isUnderEl: clientY <= elRect.bottom - elRectHalfHeight,
@@ -8,31 +14,34 @@ export const getTargetIsOverOrUnderElData = (clientY: number, elRect: DOMRect) =
   };
 };
 
-export const setDraggingItemShiftStyles = (draggingEl: HTMLElement, nextShiftY: number) => {
+export const setDraggingItemShiftStyles = (draggingEl: HTMLElement, nextShiftY: number): void => {
   requestAnimationFrame(() => {
     draggingEl.style.transform = `translateY(${nextShiftY}px)`;
   });
 };
 
-export const setSiblingItemsShiftStyles = ([
-  {
-    el,
-    draggingElRect: { height },
-  },
-  direction,
-]: [Omit<SiblingItem, 'shifted'>, Direction]) => {
+export const setSiblingItemsShiftStyles = (
+  [
+    {
+      el,
+      draggingElRect: { height },
+    },
+    direction,
+  ]: [Omit<SiblingItem, 'shifted'>, Direction],
+  additionalGap = 0,
+): void => {
   requestAnimationFrame(() => {
     if (direction === 'up') {
       el.style.setProperty('transition', 'transform 0.3s ease-in 0s');
       el.style.removeProperty('transform');
     } else {
       el.style.setProperty('transition', 'transform 0.3s ease-out 0s');
-      el.style.setProperty('transform', `translateY(${height}px)`);
+      el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);
     }
   });
 };
 
-export const setInitialDraggingItemStyles = ({ el, draggingElRect }: DraggingItem) => {
+export const setInitialDraggingItemStyles = ({ el, draggingElRect }: DraggingItem): void => {
   const { top, left, width, height } = draggingElRect;
   requestAnimationFrame(() => {
     // Inspired by https://github.com/hello-pangea/dnd
@@ -48,7 +57,7 @@ export const setInitialDraggingItemStyles = ({ el, draggingElRect }: DraggingIte
   });
 };
 
-export const unsetInitialDraggingItemStyles = ({ el }: DraggingItem) => {
+export const unsetInitialDraggingItemStyles = ({ el }: DraggingItem): void => {
   requestAnimationFrame(() => {
     el.style.removeProperty('pointer-events');
     el.style.removeProperty('position');
@@ -62,7 +71,7 @@ export const unsetInitialDraggingItemStyles = ({ el }: DraggingItem) => {
   });
 };
 
-export const setInitialPlaceholderItemStyles = ({ el, draggingElRect }: PlaceholderItem) => {
+export const setInitialPlaceholderItemStyles = ({ el, draggingElRect }: PlaceholderItem): void => {
   if (el.firstElementChild) {
     return;
   }
@@ -73,27 +82,33 @@ export const setInitialPlaceholderItemStyles = ({ el, draggingElRect }: Placehol
   node.style.setProperty('height', `${height}px`);
   node.style.setProperty('pointer-events', 'none');
   el.appendChild(node);
+  el.style.setProperty('display', 'block');
 };
 
-export const unsetInitialPlaceholderItemStyles = ({ el }: PlaceholderItem) => {
+export const unsetInitialPlaceholderItemStyles = ({ el }: PlaceholderItem): void => {
+  el.style.display = '';
+  el.removeAttribute('style');
   if (el.firstElementChild) {
     el.firstElementChild.remove();
   }
 };
 
-export const setInitialSiblingItemStyles = ({ el, shifted, draggingElRect }: SiblingItem) => {
+export const setInitialSiblingItemStyles = (
+  { el, shifted, draggingElRect }: SiblingItem,
+  additionalGap = 0,
+): void => {
   const { height } = draggingElRect;
   requestAnimationFrame(() => {
     el.style.setProperty('pointer-events', 'none');
     el.style.setProperty('transition', 'none 0s ease 0s');
 
     if (shifted) {
-      el.style.setProperty('transform', `translateY(${height}px)`);
+      el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);
     }
   });
 };
 
-export const unsetInitialSiblingItemStyles = ({ el }: Omit<SiblingItem, 'shifted'>) => {
+export const unsetInitialSiblingItemStyles = ({ el }: Omit<SiblingItem, 'shifted'>): void => {
   requestAnimationFrame(() => {
     el.style.removeProperty('pointer-events');
     el.style.removeProperty('transition');

package/src/hooks/useEffectDev.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
 import { noop } from '@vkontakte/vkjs';
 
-export const useEffectDev = process.env.NODE_ENV === 'development' ? useEffect : noop;
+export const useEffectDev: typeof useEffect =
+  process.env.NODE_ENV === 'development' ? useEffect : noop;

package/src/hooks/useEventListener.ts

@@ -1,13 +1,58 @@
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { canUseDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 interface EventListenerHandle {
   add: (el: HTMLElement | Document | Window) => void;
   remove: () => void;
 }
 
+class EventListener implements EventListenerHandle {
+  callback: (ev: any) => void = noop;
+  options: AddEventListenerOptions | boolean | undefined = undefined;
+  eventType: string;
+  #target: HTMLElement | Document | Window | null = null;
+
+  constructor(
+    type: string,
+    callback: false | null | undefined | ((ev: any) => void),
+    options?: AddEventListenerOptions | boolean,
+  ) {
+    this.options = options;
+    this.eventType = type;
+
+    if (callback) {
+      this.callback = callback;
+    }
+  }
+
+  readonly #listener = (ev: any) => {
+    this.callback(ev);
+  };
+
+  add = (el: HTMLElement | Document | Window) => {
+    if (!canUseDOM) {
+      return;
+    }
+    this.remove();
+    if (!el) {
+      return;
+    }
+
+    el.addEventListener(this.eventType, this.#listener, this.options);
+    this.#target = el;
+  };
+
+  remove = () => {
+    if (!canUseDOM || !this.#target) {
+      return;
+    }
+
+    this.#target.removeEventListener(this.eventType, this.#listener, this.options);
+    this.#target = null;
+  };
+}
+
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   event: K,
   _cb: false | null | undefined | ((ev: GlobalEventHandlersEventMap[K]) => void),
@@ -23,33 +68,22 @@ export function useEventListener<E extends Event, K extends keyof GlobalEventHan
   _cb: false | null | undefined | ((ev: E) => void),
   _options?: AddEventListenerOptions,
 ): EventListenerHandle {
-  const cbRef = React.useRef(_cb);
-  useIsomorphicLayoutEffect(() => {
-    cbRef.current = _cb;
-  }, [_cb]);
-  const cb = React.useCallback((e: any) => cbRef.current && cbRef.current(e), []);
-
-  const detach = React.useRef(noop);
-  const remove = React.useCallback(() => {
-    detach.current();
-    detach.current = noop;
+  const ref = React.useRef<EventListener | null>(null);
+  if (ref.current === null) {
+    ref.current = new EventListener(event, _cb, _options);
+  } else {
+    ref.current.eventType = event;
+    ref.current.options = _options;
+
+    if (_cb) {
+      ref.current.callback = _cb;
+    }
+  }
+
+  React.useEffect(() => {
+    const detach = ref.current?.remove.bind(ref.current);
+    return detach;
   }, []);
-  const add = React.useCallback(
-    (el: HTMLElement | Document | Window) => {
-      if (!canUseDOM) {
-        return;
-      }
-      remove();
-      if (!el) {
-        return;
-      }
-      const options = { ..._options };
-      el.addEventListener(event, cb, options);
-      detach.current = () => el.removeEventListener(event, cb, options);
-    },
-    [_options, cb, event, remove],
-  );
-  React.useEffect(() => remove, [remove]);
-
-  return React.useMemo(() => ({ add, remove }), [add, remove]);
+
+  return ref.current;
 }