@react-aria/dnd 3.11.5 → 3.12.0

package/src/useAutoScroll.ts

@@ -1,105 +0,0 @@
-/*
- * 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 {getScrollParent, isIOS, isScrollable, isWebKit} from '@react-aria/utils';
-import {RefObject} from '@react-types/shared';
-import {useCallback, useEffect, useRef} from 'react';
-
-const AUTOSCROLL_AREA_SIZE = 20;
-
-interface AutoScrollAria {
-    move(x: number, y: number): void,
-    stop(): void
-}
-
-export function useAutoScroll(ref: RefObject<Element | null>): AutoScrollAria {
-  let scrollableRef = useRef<Element>(null);
-  let scrollableX = useRef(true);
-  let scrollableY = useRef(true);
-  useEffect(() => {
-    if (ref.current) {
-      scrollableRef.current = isScrollable(ref.current) ? ref.current : getScrollParent(ref.current);
-      let style = window.getComputedStyle(scrollableRef.current);
-      scrollableX.current = /(auto|scroll)/.test(style.overflowX);
-      scrollableY.current = /(auto|scroll)/.test(style.overflowY);
-    }
-  }, [ref]);
-
-  let state = useRef<{timer: ReturnType<typeof requestAnimationFrame> | undefined, dx: number, dy: number}>({
-    timer: undefined,
-    dx: 0,
-    dy: 0
-  }).current;
-
-  useEffect(() => {
-    return () => {
-      if (state.timer) {
-        cancelAnimationFrame(state.timer);
-        state.timer = undefined;
-      }
-    };
-  // state will become a new object, so it's ok to use in the dependency array for unmount
-  }, [state]);
-
-  let scroll = useCallback(() => {
-    if (scrollableX.current && scrollableRef.current) {
-      scrollableRef.current.scrollLeft += state.dx;
-    }
-    if (scrollableY.current && scrollableRef.current) {
-      scrollableRef.current.scrollTop += state.dy;
-    }
-
-    if (state.timer) {
-      state.timer = requestAnimationFrame(scroll);
-    }
-  }, [scrollableRef, state]);
-
-  return {
-    move(x, y) {
-      // Most browsers auto scroll natively, but WebKit on macOS does not (iOS does 🤷‍♂️).
-      // https://bugs.webkit.org/show_bug.cgi?id=222636
-      if (!isWebKit() || isIOS() || !scrollableRef.current) {
-        return;
-      }
-
-      let box = scrollableRef.current.getBoundingClientRect();
-      let left = AUTOSCROLL_AREA_SIZE;
-      let top = AUTOSCROLL_AREA_SIZE;
-      let bottom = box.height - AUTOSCROLL_AREA_SIZE;
-      let right = box.width - AUTOSCROLL_AREA_SIZE;
-      if (x < left || x > right || y < top || y > bottom) {
-        if (x < left) {
-          state.dx = x - left;
-        } else if (x > right) {
-          state.dx = x - right;
-        }
-        if (y < top) {
-          state.dy = y - top;
-        } else if (y > bottom) {
-          state.dy = y - bottom;
-        }
-
-        if (!state.timer) {
-          state.timer = requestAnimationFrame(scroll);
-        }
-      } else {
-        this.stop();
-      }
-    },
-    stop() {
-      if (state.timer) {
-        cancelAnimationFrame(state.timer);
-        state.timer = undefined;
-      }
-    }
-  };
-}

package/src/useClipboard.ts

@@ -1,151 +0,0 @@
-/*
- * 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 {chain, useEffectEvent} from '@react-aria/utils';
-import {DOMAttributes, DragItem, DropItem} from '@react-types/shared';
-import {readFromDataTransfer, writeToDataTransfer} from './utils';
-import {useEffect, useRef} from 'react';
-import {useFocus} from '@react-aria/interactions';
-
-export interface ClipboardProps {
-  /** A function that returns the items to copy. */
-  getItems?: (details: {action: 'cut' | 'copy'}) => DragItem[],
-  /** Handler that is called when the user triggers a copy interaction. */
-  onCopy?: () => void,
-  /** Handler that is called when the user triggers a cut interaction. */
-  onCut?: () => void,
-  /** Handler that is called when the user triggers a paste interaction. */
-  onPaste?: (items: DropItem[]) => void,
-  /** Whether the clipboard is disabled. */
-  isDisabled?: boolean
-}
-
-export interface ClipboardResult {
-  /** Props for the element that will handle clipboard events. */
-  clipboardProps: DOMAttributes
-}
-
-const globalEvents = new Map();
-function addGlobalEventListener(event, fn) {
-  let eventData = globalEvents.get(event);
-  if (!eventData) {
-    let handlers = new Set<(e: Event) => void>();
-    let listener = (e) => {
-      for (let handler of handlers) {
-        handler(e);
-      }
-    };
-
-    eventData = {listener, handlers};
-    globalEvents.set(event, eventData);
-
-    document.addEventListener(event, listener);
-  }
-
-  eventData.handlers.add(fn);
-  return () => {
-    eventData.handlers.delete(fn);
-    if (eventData.handlers.size === 0) {
-      document.removeEventListener(event, eventData.listener);
-      globalEvents.delete(event);
-    }
-  };
-}
-
-/**
- * Handles clipboard interactions for a focusable element. Supports items of multiple
- * data types, and integrates with the operating system native clipboard.
- */
-export function useClipboard(options: ClipboardProps): ClipboardResult {
-  let {isDisabled} = options;
-  let isFocusedRef = useRef(false);
-  let {focusProps} = useFocus({
-    onFocusChange: (isFocused) => {
-      isFocusedRef.current = isFocused;
-    }
-  });
-
-  let onBeforeCopy = useEffectEvent((e: ClipboardEvent) => {
-    // Enable the "Copy" menu item in Safari if this element is focused and copying is supported.
-    if (isFocusedRef.current && options.getItems) {
-      e.preventDefault();
-    }
-  });
-
-  let onCopy = useEffectEvent((e: ClipboardEvent) => {
-    if (!isFocusedRef.current || !options.getItems) {
-      return;
-    }
-
-    e.preventDefault();
-    if (e.clipboardData) {
-      writeToDataTransfer(e.clipboardData, options.getItems({action: 'copy'}));
-      options.onCopy?.();
-    }
-  });
-
-  let onBeforeCut = useEffectEvent((e: ClipboardEvent) => {
-    if (isFocusedRef.current && options.onCut && options.getItems) {
-      e.preventDefault();
-    }
-  });
-
-  let onCut = useEffectEvent((e: ClipboardEvent) => {
-    if (!isFocusedRef.current || !options.onCut || !options.getItems) {
-      return;
-    }
-
-    e.preventDefault();
-    if (e.clipboardData) {
-      writeToDataTransfer(e.clipboardData, options.getItems({action: 'cut'}));
-      options.onCut();
-    }
-  });
-
-  let onBeforePaste = useEffectEvent((e: ClipboardEvent) => {
-    // Unfortunately, e.clipboardData.types is not available in this event so we always
-    // have to enable the Paste menu item even if the type of data is unsupported.
-    if (isFocusedRef.current && options.onPaste) {
-      e.preventDefault();
-    }
-  });
-
-  let onPaste = useEffectEvent((e: ClipboardEvent) => {
-    if (!isFocusedRef.current || !options.onPaste) {
-      return;
-    }
-
-    e.preventDefault();
-    if (e.clipboardData) {
-      let items = readFromDataTransfer(e.clipboardData);
-      options.onPaste(items);
-    }
-  });
-
-  useEffect(() => {
-    if (isDisabled) {
-      return;
-    }
-    return chain(
-      addGlobalEventListener('beforecopy', onBeforeCopy),
-      addGlobalEventListener('copy', onCopy),
-      addGlobalEventListener('beforecut', onBeforeCut),
-      addGlobalEventListener('cut', onCut),
-      addGlobalEventListener('beforepaste', onBeforePaste),
-      addGlobalEventListener('paste', onPaste)
-    );
-  }, [isDisabled]);
-
-  return {
-    clipboardProps: focusProps
-  };
-}

package/src/useDrag.ts

@@ -1,390 +0,0 @@
-/*
- * 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 {AriaButtonProps} from '@react-types/button';
-import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared';
-import {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react';
-import * as DragManager from './DragManager';
-import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
-import {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners} from '@react-aria/utils';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-export interface DragOptions {
-  /** Handler that is called when a drag operation is started. */
-  onDragStart?: (e: DragStartEvent) => void,
-  /** Handler that is called when the drag is moved. */
-  onDragMove?: (e: DragMoveEvent) => void,
-  /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */
-  onDragEnd?: (e: DragEndEvent) => void,
-  /** A function that returns the items being dragged. */
-  getItems: () => DragItem[],
-  /** The ref of the element that will be rendered as the drag preview while dragging. */
-  preview?: RefObject<DragPreviewRenderer | null>,
-  /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */
-  getAllowedDropOperations?: () => DropOperation[],
-  /**
-   * Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode.
-   * If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
-   */
-  hasDragButton?: boolean,
-  /**
-   * Whether the drag operation is disabled. If true, the element will not be draggable.
-   */
-  isDisabled?: boolean
-}
-
-export interface DragResult {
-  /** Props for the draggable element. */
-  dragProps: HTMLAttributes<HTMLElement>,
-  /** Props for the explicit drag button affordance, if any. */
-  dragButtonProps: AriaButtonProps,
-  /** Whether the element is currently being dragged. */
-  isDragging: boolean
-}
-
-const MESSAGES = {
-  keyboard: {
-    start: 'dragDescriptionKeyboard',
-    end: 'endDragKeyboard'
-  },
-  touch: {
-    start: 'dragDescriptionTouch',
-    end: 'endDragTouch'
-  },
-  virtual: {
-    start: 'dragDescriptionVirtual',
-    end: 'endDragVirtual'
-  }
-};
-
-/**
- * Handles drag interactions for an element, with support for traditional mouse and touch
- * based drag and drop, in addition to full parity for keyboard and screen reader users.
- */
-export function useDrag(options: DragOptions): DragResult {
-  let {hasDragButton, isDisabled} = options;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');
-  let state = useRef({
-    options,
-    x: 0,
-    y: 0
-  }).current;
-  state.options = options;
-  let isDraggingRef = useRef<Element | null>(null);
-  let [isDragging, setDraggingState] = useState(false);
-  let setDragging = (element: Element | null) => {
-    isDraggingRef.current = element;
-    setDraggingState(!!element);
-  };
-  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
-  let modalityOnPointerDown = useRef<string>(null);
-
-  let onDragStart = (e: DragEvent) => {
-    if (e.defaultPrevented) {
-      return;
-    }
-
-    // Prevent the drag event from propagating to any parent draggables
-    e.stopPropagation();
-
-    // If this drag was initiated by a mobile screen reader (e.g. VoiceOver or TalkBack), enter virtual dragging mode.
-    if (modalityOnPointerDown.current === 'virtual') {
-      e.preventDefault();
-      startDragging(e.target as HTMLElement);
-      modalityOnPointerDown.current = null;
-      return;
-    }
-
-    if (typeof options.onDragStart === 'function') {
-      options.onDragStart({
-        type: 'dragstart',
-        x: e.clientX,
-        y: e.clientY
-      });
-    }
-
-    let items = options.getItems();
-    // Clear existing data (e.g. selected text on the page would be included in some browsers)
-    e.dataTransfer.clearData?.();
-    writeToDataTransfer(e.dataTransfer, items);
-
-    let allowed = DROP_OPERATION.all;
-    if (typeof options.getAllowedDropOperations === 'function') {
-      let allowedOperations = options.getAllowedDropOperations();
-      allowed = DROP_OPERATION.none;
-      for (let operation of allowedOperations) {
-        allowed |= DROP_OPERATION[operation] || DROP_OPERATION.none;
-      }
-    }
-
-    setGlobalAllowedDropOperations(allowed);
-    let effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
-    e.dataTransfer.effectAllowed = effectAllowed === 'cancel' ? 'none' : effectAllowed;
-
-    // If there is a preview option, use it to render a custom preview image that will
-    // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
-    if (typeof options.preview?.current === 'function') {
-      options.preview.current(items, (node, userX, userY) => {
-        if (!node) {
-          return;
-        }
-        // Compute the offset that the preview will appear under the mouse.
-        // If possible, this is based on the point the user clicked on the target.
-        // If the preview is much smaller, then just use the center point of the preview.
-        let size = node.getBoundingClientRect();
-        let rect = e.currentTarget.getBoundingClientRect();
-        let defaultX = e.clientX - rect.x;
-        let defaultY = e.clientY - rect.y;
-        if (defaultX > size.width || defaultY > size.height) {
-          defaultX = size.width / 2;
-          defaultY = size.height / 2;
-        }
-
-        // Start with default offsets.
-        let offsetX = defaultX;
-        let offsetY = defaultY;
-
-        // If the preview renderer supplied explicit offsets, use those.
-        if (typeof userX === 'number' && typeof userY === 'number') {
-          offsetX = userX;
-          offsetY = userY;
-        }
-
-        // Clamp the offset so it stays within the preview bounds. Browsers
-        // automatically clamp out-of-range values, but doing it ourselves
-        // prevents the visible "snap" that can occur when the browser adjusts
-        // them after the first drag update.
-        offsetX = Math.max(0, Math.min(offsetX, size.width));
-        offsetY = Math.max(0, Math.min(offsetY, size.height));
-
-        // Rounding height to an even number prevents blurry preview seen on some screens
-        let height = 2 * Math.round(size.height / 2);
-        node.style.height = `${height}px`;
-
-        e.dataTransfer.setDragImage(node, offsetX, offsetY);
-      });
-    }
-
-    // Enforce that drops are handled by useDrop.
-    addGlobalListener(window, 'drop', e => {
-      e.preventDefault();
-      e.stopPropagation();
-      console.warn('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
-    }, {once: true});
-    state.x = e.clientX;
-    state.y = e.clientY;
-
-    // Wait a frame before we set dragging to true so that the browser has time to
-    // render the preview image before we update the element that has been dragged.
-    let target = e.target;
-    requestAnimationFrame(() => {
-      setDragging(target as Element);
-    });
-  };
-
-  let onDrag = (e: DragEvent) => {
-    // Prevent the drag event from propagating to any parent draggables
-    e.stopPropagation();
-
-    if (e.clientX === state.x && e.clientY === state.y) {
-      return;
-    }
-
-    if (typeof options.onDragMove === 'function') {
-      options.onDragMove({
-        type: 'dragmove',
-        x: e.clientX,
-        y: e.clientY
-      });
-    }
-
-    state.x = e.clientX;
-    state.y = e.clientY;
-  };
-
-  let onDragEnd = (e: DragEvent) => {
-    // Prevent the drag event from propagating to any parent draggables
-    e.stopPropagation();
-
-    if (typeof options.onDragEnd === 'function') {
-      let event: DragEndEvent = {
-        type: 'dragend',
-        x: e.clientX,
-        y: e.clientY,
-        dropOperation: DROP_EFFECT_TO_DROP_OPERATION[e.dataTransfer.dropEffect]
-      };
-
-      // Chrome Android always returns none as its dropEffect so we use the drop effect set in useDrop via
-      // onDragEnter/onDragOver instead. https://bugs.chromium.org/p/chromium/issues/detail?id=1353951
-      if (globalDropEffect) {
-        event.dropOperation = DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect];
-      }
-      options.onDragEnd(event);
-    }
-
-    setDragging(null);
-    removeAllGlobalListeners();
-    setGlobalAllowedDropOperations(DROP_OPERATION.none);
-    setGlobalDropEffect(undefined);
-  };
-
-  // If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801
-  // In this case, we need to manually call onDragEnd on cleanup
-
-  useEffect(() => {
-    return () => {
-      // Check that the dragged element has actually unmounted from the DOM and not a React Strict Mode false positive.
-      // https://github.com/facebook/react/issues/29585
-      // React 16 ran effect cleanups before removing elements from the DOM but did not have this issue.
-      if (isDraggingRef.current && (!isDraggingRef.current.isConnected || parseInt(ReactVersion, 10) < 17)) {
-        if (typeof state.options.onDragEnd === 'function') {
-          let event: DragEndEvent = {
-            type: 'dragend',
-            x: 0,
-            y: 0,
-            dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect || 'none']
-          };
-          state.options.onDragEnd(event);
-        }
-
-        setDragging(null);
-        setGlobalAllowedDropOperations(DROP_OPERATION.none);
-        setGlobalDropEffect(undefined);
-      }
-    };
-  }, [state]);
-
-  let onPress = (e: PressEvent) => {
-    if (e.pointerType !== 'keyboard' && e.pointerType !== 'virtual') {
-      return;
-    }
-
-    startDragging(e.target as HTMLElement);
-  };
-
-  let startDragging = (target: HTMLElement) => {
-    if (typeof state.options.onDragStart === 'function') {
-      let rect = target.getBoundingClientRect();
-      state.options.onDragStart({
-        type: 'dragstart',
-        x: rect.x + (rect.width / 2),
-        y: rect.y + (rect.height / 2)
-      });
-    }
-
-    DragManager.beginDragging({
-      element: target,
-      items: state.options.getItems(),
-      allowedDropOperations: typeof state.options.getAllowedDropOperations === 'function'
-        ? state.options.getAllowedDropOperations()
-        : ['move', 'copy', 'link'],
-      onDragEnd(e) {
-        setDragging(null);
-        if (typeof state.options.onDragEnd === 'function') {
-          state.options.onDragEnd(e);
-        }
-      }
-    }, stringFormatter);
-
-    setDragging(target);
-  };
-
-  let modality = useDragModality();
-  let message = !isDragging ? MESSAGES[modality].start : MESSAGES[modality].end;
-
-  let descriptionProps = useDescription(stringFormatter.format(message));
-
-  let interactions: HTMLAttributes<HTMLElement> = {};
-  if (!hasDragButton) {
-    // If there's no separate button to trigger accessible drag and drop mode,
-    // then add event handlers to the draggable element itself to start dragging.
-    // For keyboard, we use the Enter key in a capturing listener to prevent other
-    // events such as selection from also occurring. We attempt to infer whether a
-    // pointer event (e.g. long press) came from a touch screen reader, and then initiate
-    // dragging in the native onDragStart listener above.
-
-    interactions = {
-      ...descriptionProps,
-      onPointerDown(e) {
-        modalityOnPointerDown.current = isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
-
-        // Try to detect virtual drag passthrough gestures.
-        if (e.width < 1 && e.height < 1) {
-          // iOS VoiceOver.
-          modalityOnPointerDown.current = 'virtual';
-        } else {
-          let rect = e.currentTarget.getBoundingClientRect();
-          let offsetX = e.clientX - rect.x;
-          let offsetY = e.clientY - rect.y;
-          let centerX = rect.width / 2;
-          let centerY = rect.height / 2;
-
-          if (Math.abs(offsetX - centerX) <= 0.5 && Math.abs(offsetY - centerY) <= 0.5) {
-            // Android TalkBack.
-            modalityOnPointerDown.current = 'virtual';
-          } else {
-            modalityOnPointerDown.current = e.pointerType;
-          }
-        }
-      },
-      onKeyDownCapture(e) {
-        if (e.target === e.currentTarget && e.key === 'Enter') {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      },
-      onKeyUpCapture(e) {
-        if (e.target === e.currentTarget && e.key === 'Enter') {
-          e.preventDefault();
-          e.stopPropagation();
-          startDragging(e.target as HTMLElement);
-        }
-      },
-      onClick(e) {
-        // Handle NVDA/JAWS in browse mode, and touch screen readers. In this case, no keyboard events are fired.
-        if (isVirtualClick(e.nativeEvent) || modalityOnPointerDown.current === 'virtual') {
-          e.preventDefault();
-          e.stopPropagation();
-          startDragging(e.target as HTMLElement);
-        }
-      }
-    };
-  }
-
-  if (isDisabled) {
-    return {
-      dragProps: {
-        draggable: 'false'
-      },
-      dragButtonProps: {},
-      isDragging: false
-    };
-  }
-
-  return {
-    dragProps: {
-      ...interactions,
-      draggable: 'true',
-      onDragStart,
-      onDrag,
-      onDragEnd
-    },
-    dragButtonProps: {
-      ...descriptionProps,
-      onPress
-    },
-    isDragging
-  };
-}

package/src/useDraggableCollection.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright 2022 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 {DraggableCollectionState} from '@react-stately/dnd';
-import {globalDndState, setDraggingCollectionRef} from './utils';
-import {RefObject} from '@react-types/shared';
-
-export interface DraggableCollectionOptions {}
-
-/**
- * Handles drag interactions for a collection component, with support for traditional mouse and touch
- * based drag and drop, in addition to full parity for keyboard and screen reader users.
- */
-export function useDraggableCollection(props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>): void {
-  // Update global DnD state if this keys within this collection are dragged
-  let {draggingCollectionRef} = globalDndState;
-  if  (state.draggingKeys.size > 0 && draggingCollectionRef?.current !== ref.current) {
-    setDraggingCollectionRef(ref);
-  }
-}