first init

2026-08-17 10:52:09 +07:00
commit 88c7c653c2
9281 changed files with 2156575 additions and 0 deletions
@@ -0,0 +1,148 @@
+# @dnd-kit/utilities
+
+## 3.2.2
+
+### Patch Changes
+
+- [#1239](https://github.com/clauderic/dnd-kit/pull/1239) [`f342d5e`](https://github.com/clauderic/dnd-kit/commit/f342d5efd98507f173b6a170b35bee1545d40311) Thanks [@petdud](https://github.com/petdud)! - Fix: getOwnerDocument should get correct document for SVG Elements
+
+## 3.2.1
+
+### Patch Changes
+
+- [#948](https://github.com/clauderic/dnd-kit/pull/948) [`da7c60d`](https://github.com/clauderic/dnd-kit/commit/da7c60dcbb76d89cf1fcb421e69a4abcea2eeebe) Thanks [@Ayc0](https://github.com/Ayc0)! - Upgrade to TypeScript to 4.8
+
+## 3.2.0
+
+### Minor Changes
+
+- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `findFirstFocusableNode` utility function that returns the first focusable node within a given HTMLElement, or the element itself if it is focusable.
+
+- [#733](https://github.com/clauderic/dnd-kit/pull/733) [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `useEvent` hook based on [implementation breakdown in the RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#internal-implementation). In the future, this hook will be used as a polyfill if the native React hook is unavailble.
+
+## 3.1.0
+
+### Minor Changes
+
+- [#518](https://github.com/clauderic/dnd-kit/pull/518) [`6310227`](https://github.com/clauderic/dnd-kit/commit/63102272d0d63dae349e2e9f638277e16a7d5970) Thanks [@clauderic](https://github.com/clauderic)! - Major internal refactor of measuring and collision detection.
+
+  ### Summary of changes
+
+  Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.
+
+  This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.
+
+  ### Breaking changes:
+
+  - By default, `@dnd-kit` now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
+    - Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
+    - Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of <DndContext>. Refer to the <Switch> example.
+  - Reduced the number of concepts related to measuring from `ViewRect`, `LayoutRect` to just a single concept of `ClientRect`.
+    - The `ClientRect` interface no longer holds the `offsetTop` and `offsetLeft` properties. For most use-cases, you can replace `offsetTop` with `top` and `offsetLeft` with `left`.
+    - Replaced the following exports from the `@dnd-kit/core` package with `getClientRect`:
+      - `getBoundingClientRect`
+      - `getViewRect`
+      - `getLayoutRect`
+      - `getViewportLayoutRect`
+  - Removed `translatedRect` from the `SensorContext` interface. Replace usage with `collisionRect`.
+  - Removed `activeNodeClientRect` on the `DndContext` interface. Replace with `activeNodeRect`.
+
+- [`528c67e`](https://github.com/clauderic/dnd-kit/commit/528c67e4c617dfc0ce5221496aa8b222ffc82ddb) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `useLatestValue` hook, which returns a ref that holds the latest value of a given argument. Optionally, the second argument can be used to customize the dependencies passed to the effect.
+
+### Patch Changes
+
+- [#561](https://github.com/clauderic/dnd-kit/pull/561) [`02edd26`](https://github.com/clauderic/dnd-kit/commit/02edd2691b24bb49f2e7c9f9a3f282031bf658b7) Thanks [@clauderic](https://github.com/clauderic)! - - The `useNodeRef` hook's `onChange` argument now receives both the current node and the previous node that were attached to the ref.
+  - The `onChange` argument is only called if the previous node differs from the current node
+
+## 3.0.2
+
+### Patch Changes
+
+- [#532](https://github.com/clauderic/dnd-kit/pull/532) [`dfa8d69`](https://github.com/clauderic/dnd-kit/commit/dfa8d69d98e8f271b29fa516cc13b8cd0c01d371) Thanks [@Nauss](https://github.com/Nauss)! - fix: `isWindow` has been updated to support checking wether an element is a window object in Electron applications.
+
+## 3.0.1
+
+### Patch Changes
+
+- [#509](https://github.com/clauderic/dnd-kit/pull/509) [`1c6369e`](https://github.com/clauderic/dnd-kit/commit/1c6369e24ff338760adfb806c3017c72f3194726) Thanks [@clauderic](https://github.com/clauderic)! - Helpers have been updated to support rendering in foreign `window` contexts (via `ReactDOM.render` or `ReactDOM.createPortal`).
+
+  For example, checking if an element is an instance of an `HTMLElement` is normally done like so:
+
+  ```ts
+  if (element instanceof HTMLElement)
+  ```
+
+  However, when rendering in a different window, this can return false even if the element is indeed an HTMLElement, because this code is equivalent to:
+
+  ```ts
+  if (element instanceof window.HTMLElement)
+  ```
+
+  And in this case, the `window` of the `element` is different from the main execution context `window`, because we are rendering via a portal into another window.
+
+  This can be solved by finding the local window of the element:
+
+  ```ts
+  const elementWindow = element.ownerDocument.defaultView;
+
+  if (element instanceof elementWindow.HTMLElement)
+  ```
+
+## 3.0.0
+
+### Major Changes
+
+- [#373](https://github.com/clauderic/dnd-kit/pull/373) [`1f5ca27`](https://github.com/clauderic/dnd-kit/commit/1f5ca27b17879861c2c545160c2046a747544846) Thanks [@clauderic](https://github.com/clauderic)! - Added react to peerDependencies of @dnd-kit/utilities
+
+### Minor Changes
+
+- [#334](https://github.com/clauderic/dnd-kit/pull/334) [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366) Thanks [@trentmwillis](https://github.com/trentmwillis)! - Move `Coordinates` interface along with `getEventCoordinates`, `isMouseEvent` and `isTouchEvent` helpers to @dnd-kit/utilities
+
+### Patch Changes
+
+- [#437](https://github.com/clauderic/dnd-kit/pull/437) [`0e628bc`](https://github.com/clauderic/dnd-kit/commit/0e628bce53fb1a7223cdedd203cb07b6e62e5ec1) Thanks [@chestozo](https://github.com/chestozo)! - Added PointerEvent support to the `getEventCoordinates` method. This fixes testing the PointerSensor with Cypress (#436)
+
+## 2.0.0
+
+### Major Changes
+
+- [`a9d92cf`](https://github.com/clauderic/dnd-kit/commit/a9d92cf1fa35dd957e6c5915a13dfd2af134c103) [#174](https://github.com/clauderic/dnd-kit/pull/174) Thanks [@clauderic](https://github.com/clauderic)! - Distributed assets now only target modern browsers. [Browserlist](https://github.com/browserslist/browserslist) config:
+
+  ```
+  defaults
+  last 2 version
+  not IE 11
+  not dead
+  ```
+
+  If you need to support older browsers, include the appropriate polyfills in your project's build process.
+
+## 1.0.3
+
+### Patch Changes
+
+- [`6a5c8a1`](https://github.com/clauderic/dnd-kit/commit/6a5c8a13bf19742efa65b20f16666f00ffaae1b1) [#154](https://github.com/clauderic/dnd-kit/pull/154) Thanks [@clauderic](https://github.com/clauderic)! - Update implementation of FirstArgument
+
+## 1.0.2
+
+### Patch Changes
+
+- [`423610c`](https://github.com/clauderic/dnd-kit/commit/423610ca48c5e5ca95545fdb5c5cfcfbd3d233ba) [#56](https://github.com/clauderic/dnd-kit/pull/56) Thanks [@clauderic](https://github.com/clauderic)! - Add MIT license to package.json and distributed files
+
+## 1.0.1
+
+### Patch Changes
+
+- [`0b343c7`](https://github.com/clauderic/dnd-kit/commit/0b343c7e88a68351f8a39f643e9f26b8e046ef48) [#52](https://github.com/clauderic/dnd-kit/pull/52) Thanks [@clauderic](https://github.com/clauderic)! - Add repository entry to package.json files
+
+## 1.0.0
+
+### Major Changes
+
+- [`2912350`](https://github.com/clauderic/dnd-kit/commit/2912350c5008c2b0edda3bae30b5075a852dea63) Thanks [@clauderic](https://github.com/clauderic)! - Initial public release.
+
+## 0.1.0
+
+### Minor Changes
+
+- [`7bd4568`](https://github.com/clauderic/dnd-kit/commit/7bd4568e9f339552fd73a9a4c888460b11195a5e) [#30](https://github.com/clauderic/dnd-kit/pull/30) - Initial beta release, authored by [@clauderic](https://github.com/clauderic).
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021, Claudéric Demers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,5 @@
+# @dnd-kit/utilities
+
+[![Stable release](https://img.shields.io/npm/v/@dnd-kit/utilities.svg)](https://npm.im/@dnd-kit/sortable)
+
+Internal utilities to bee shared between `@dnd-kit` packages.
@@ -0,0 +1,2 @@
+export declare const add: <T extends Record<U, number>, U extends string>(object: T, ...adjustments: Partial<T>[]) => T;
+export declare const subtract: <T extends Record<U, number>, U extends string>(object: T, ...adjustments: Partial<T>[]) => T;
@@ -0,0 +1,5 @@
+import type { Coordinates } from './types';
+/**
+ * Returns the normalized x and y coordinates for mouse and touch events.
+ */
+export declare function getEventCoordinates(event: Event): Coordinates | null;
@@ -0,0 +1,2 @@
+export type { Coordinates } from './types';
+export { getEventCoordinates } from './getEventCoordinates';
@@ -0,0 +1,4 @@
+export declare type Coordinates = {
+    x: number;
+    y: number;
+};
@@ -0,0 +1,25 @@
+export declare type Transform = {
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+};
+export interface Transition {
+    property: string;
+    easing: string;
+    duration: number;
+}
+export declare const CSS: Readonly<{
+    Translate: {
+        toString(transform: Transform | null): string | undefined;
+    };
+    Scale: {
+        toString(transform: Transform | null): string | undefined;
+    };
+    Transform: {
+        toString(transform: Transform | null): string | undefined;
+    };
+    Transition: {
+        toString({ property, duration, easing }: Transition): string;
+    };
+}>;
@@ -0,0 +1 @@
+export declare function hasViewportRelativeCoordinates(event: Event): event is Event & Pick<PointerEvent, 'clientX' | 'clientY'>;
@@ -0,0 +1,3 @@
+export { hasViewportRelativeCoordinates } from './hasViewportRelativeCoordinates';
+export { isKeyboardEvent } from './isKeyboardEvent';
+export { isTouchEvent } from './isTouchEvent';
@@ -0,0 +1 @@
+export declare function isKeyboardEvent(event: Event | undefined | null): event is KeyboardEvent;
@@ -0,0 +1 @@
+export declare function isTouchEvent(event: Event | undefined | null): event is TouchEvent;
@@ -0,0 +1 @@
+export declare const canUseDOM: boolean;
@@ -0,0 +1 @@
+export declare function getOwnerDocument(target: Event['target']): Document;
@@ -0,0 +1 @@
+export declare function getWindow(target: Event['target']): typeof window;
@@ -0,0 +1,3 @@
+export { canUseDOM } from './canUseDOM';
+export { getOwnerDocument } from './getOwnerDocument';
+export { getWindow } from './getWindow';
@@ -0,0 +1 @@
+export declare function findFirstFocusableNode(element: HTMLElement): HTMLElement | null;
@@ -0,0 +1 @@
+export { findFirstFocusableNode } from './findFirstFocusableNode';
@@ -0,0 +1,9 @@
+export { useCombinedRefs } from './useCombinedRefs';
+export { useEvent } from './useEvent';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useInterval } from './useInterval';
+export { useLatestValue } from './useLatestValue';
+export { useLazyMemo } from './useLazyMemo';
+export { useNodeRef } from './useNodeRef';
+export { usePrevious } from './usePrevious';
+export { useUniqueId } from './useUniqueId';
@@ -0,0 +1 @@
+export declare function useCombinedRefs<T>(...refs: ((node: T) => void)[]): (node: T) => void;
@@ -0,0 +1 @@
+export declare function useEvent<T extends Function>(handler: T | undefined): (...args: any) => any;
@@ -0,0 +1 @@
+export declare function useInterval(): readonly [(listener: Function, duration: number) => void, () => void];
@@ -0,0 +1,6 @@
+import { useLayoutEffect } from 'react';
+/**
+ * A hook that resolves to useEffect on the server and useLayoutEffect on the client
+ * @param callback {function} Callback function that is invoked when the dependencies of the hook change
+ */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
@@ -0,0 +1,2 @@
+import type { DependencyList } from 'react';
+export declare function useLatestValue<T extends any>(value: T, dependencies?: DependencyList): import("react").MutableRefObject<T>;
@@ -0,0 +1 @@
+export declare function useLazyMemo<T>(callback: (prevValue: T | undefined) => T, dependencies: any[]): T;
@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useNodeRef(onChange?: (newElement: HTMLElement | null, previousElement: HTMLElement | null) => void): readonly [import("react").MutableRefObject<HTMLElement | null>, (element: HTMLElement | null) => void];
@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;
@@ -0,0 +1 @@
+export declare function useUniqueId(prefix: string, value?: string): string;
@@ -0,0 +1,11 @@
+export { useCombinedRefs, useEvent, useIsomorphicLayoutEffect, useInterval, useLatestValue, useLazyMemo, useNodeRef, usePrevious, useUniqueId, } from './hooks';
+export { add, subtract } from './adjustment';
+export type { Coordinates } from './coordinates';
+export { getEventCoordinates } from './coordinates';
+export { CSS } from './css';
+export type { Transform, Transition } from './css';
+export { hasViewportRelativeCoordinates, isKeyboardEvent, isTouchEvent, } from './event';
+export { canUseDOM, getOwnerDocument, getWindow } from './execution-context';
+export { findFirstFocusableNode } from './focus';
+export { isDocument, isHTMLElement, isNode, isSVGElement, isWindow, } from './type-guards';
+export type { Arguments, DeepRequired, FirstArgument, Without } from './types';
@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./utilities.cjs.production.min.js')
+} else {
+  module.exports = require('./utilities.cjs.development.js')
+}
@@ -0,0 +1,5 @@
+export { isDocument } from './isDocument';
+export { isHTMLElement } from './isHTMLElement';
+export { isNode } from './isNode';
+export { isSVGElement } from './isSVGElement';
+export { isWindow } from './isWindow';
@@ -0,0 +1 @@
+export declare function isDocument(node: Node): node is Document;
@@ -0,0 +1 @@
+export declare function isHTMLElement(node: Node | Window): node is HTMLElement;
@@ -0,0 +1 @@
+export declare function isNode(node: Object): node is Node;
@@ -0,0 +1 @@
+export declare function isSVGElement(node: Node): node is SVGElement;
@@ -0,0 +1 @@
+export declare function isWindow(element: Object): element is typeof window;
@@ -0,0 +1,6 @@
+export declare type Arguments<T> = T extends (...args: infer U) => any ? U : never;
+export declare type DeepRequired<T> = {
+    [K in keyof T]-?: Required<T[K]>;
+};
+export declare type FirstArgument<T> = T extends (firstArg: infer U, ...args: Array<any>) => any ? U : never;
+export declare type Without<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -0,0 +1,361 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return react.useMemo(() => node => {
+    refs.forEach(ref => ref(node));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
+// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === '[object Window]' || // In Electron context the Window object serializes to [object global]
+  elementString === '[object global]';
+}
+
+function isNode(node) {
+  return 'nodeType' in node;
+}
+
+function getWindow(target) {
+  var _target$ownerDocument, _target$ownerDocument2;
+
+  if (!target) {
+    return window;
+  }
+
+  if (isWindow(target)) {
+    return target;
+  }
+
+  if (!isNode(target)) {
+    return window;
+  }
+
+  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+
+function isDocument(node) {
+  const {
+    Document
+  } = getWindow(node);
+  return node instanceof Document;
+}
+
+function isHTMLElement(node) {
+  if (isWindow(node)) {
+    return false;
+  }
+
+  return node instanceof getWindow(node).HTMLElement;
+}
+
+function isSVGElement(node) {
+  return node instanceof getWindow(node).SVGElement;
+}
+
+function getOwnerDocument(target) {
+  if (!target) {
+    return document;
+  }
+
+  if (isWindow(target)) {
+    return target.document;
+  }
+
+  if (!isNode(target)) {
+    return document;
+  }
+
+  if (isDocument(target)) {
+    return target;
+  }
+
+  if (isHTMLElement(target) || isSVGElement(target)) {
+    return target.ownerDocument;
+  }
+
+  return document;
+}
+
+/**
+ * A hook that resolves to useEffect on the server and useLayoutEffect on the client
+ * @param callback {function} Callback function that is invoked when the dependencies of the hook change
+ */
+
+const useIsomorphicLayoutEffect = canUseDOM ? react.useLayoutEffect : react.useEffect;
+
+function useEvent(handler) {
+  const handlerRef = react.useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return react.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+  }, []);
+}
+
+function useInterval() {
+  const intervalRef = react.useRef(null);
+  const set = react.useCallback((listener, duration) => {
+    intervalRef.current = setInterval(listener, duration);
+  }, []);
+  const clear = react.useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  return [set, clear];
+}
+
+function useLatestValue(value, dependencies) {
+  if (dependencies === void 0) {
+    dependencies = [value];
+  }
+
+  const valueRef = react.useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, dependencies);
+  return valueRef;
+}
+
+function useLazyMemo(callback, dependencies) {
+  const valueRef = react.useRef();
+  return react.useMemo(() => {
+    const newValue = callback(valueRef.current);
+    valueRef.current = newValue;
+    return newValue;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [...dependencies]);
+}
+
+function useNodeRef(onChange) {
+  const onChangeHandler = useEvent(onChange);
+  const node = react.useRef(null);
+  const setNodeRef = react.useCallback(element => {
+    if (element !== node.current) {
+      onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
+    }
+
+    node.current = element;
+  }, //eslint-disable-next-line
+  []);
+  return [node, setNodeRef];
+}
+
+function usePrevious(value) {
+  const ref = react.useRef();
+  react.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+let ids = {};
+function useUniqueId(prefix, value) {
+  return react.useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+    ids[prefix] = id;
+    return prefix + "-" + id;
+  }, [prefix, value]);
+}
+
+function createAdjustmentFn(modifier) {
+  return function (object) {
+    for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      adjustments[_key - 1] = arguments[_key];
+    }
+
+    return adjustments.reduce((accumulator, adjustment) => {
+      const entries = Object.entries(adjustment);
+
+      for (const [key, valueAdjustment] of entries) {
+        const value = accumulator[key];
+
+        if (value != null) {
+          accumulator[key] = value + modifier * valueAdjustment;
+        }
+      }
+
+      return accumulator;
+    }, { ...object
+    });
+  };
+}
+
+const add = /*#__PURE__*/createAdjustmentFn(1);
+const subtract = /*#__PURE__*/createAdjustmentFn(-1);
+
+function hasViewportRelativeCoordinates(event) {
+  return 'clientX' in event && 'clientY' in event;
+}
+
+function isKeyboardEvent(event) {
+  if (!event) {
+    return false;
+  }
+
+  const {
+    KeyboardEvent
+  } = getWindow(event.target);
+  return KeyboardEvent && event instanceof KeyboardEvent;
+}
+
+function isTouchEvent(event) {
+  if (!event) {
+    return false;
+  }
+
+  const {
+    TouchEvent
+  } = getWindow(event.target);
+  return TouchEvent && event instanceof TouchEvent;
+}
+
+/**
+ * Returns the normalized x and y coordinates for mouse and touch events.
+ */
+
+function getEventCoordinates(event) {
+  if (isTouchEvent(event)) {
+    if (event.touches && event.touches.length) {
+      const {
+        clientX: x,
+        clientY: y
+      } = event.touches[0];
+      return {
+        x,
+        y
+      };
+    } else if (event.changedTouches && event.changedTouches.length) {
+      const {
+        clientX: x,
+        clientY: y
+      } = event.changedTouches[0];
+      return {
+        x,
+        y
+      };
+    }
+  }
+
+  if (hasViewportRelativeCoordinates(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  return null;
+}
+
+const CSS = /*#__PURE__*/Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
+    }
+
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+
+  }
+});
+
+const SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';
+function findFirstFocusableNode(element) {
+  if (element.matches(SELECTOR)) {
+    return element;
+  }
+
+  return element.querySelector(SELECTOR);
+}
+
+exports.CSS = CSS;
+exports.add = add;
+exports.canUseDOM = canUseDOM;
+exports.findFirstFocusableNode = findFirstFocusableNode;
+exports.getEventCoordinates = getEventCoordinates;
+exports.getOwnerDocument = getOwnerDocument;
+exports.getWindow = getWindow;
+exports.hasViewportRelativeCoordinates = hasViewportRelativeCoordinates;
+exports.isDocument = isDocument;
+exports.isHTMLElement = isHTMLElement;
+exports.isKeyboardEvent = isKeyboardEvent;
+exports.isNode = isNode;
+exports.isSVGElement = isSVGElement;
+exports.isTouchEvent = isTouchEvent;
+exports.isWindow = isWindow;
+exports.subtract = subtract;
+exports.useCombinedRefs = useCombinedRefs;
+exports.useEvent = useEvent;
+exports.useInterval = useInterval;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useLatestValue = useLatestValue;
+exports.useLazyMemo = useLazyMemo;
+exports.useNodeRef = useNodeRef;
+exports.usePrevious = usePrevious;
+exports.useUniqueId = useUniqueId;
+//# sourceMappingURL=utilities.cjs.development.js.map
@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement;function n(e){const t=Object.prototype.toString.call(e);return"[object Window]"===t||"[object global]"===t}function r(e){return"nodeType"in e}function o(e){var t,o;return e?n(e)?e:r(e)&&null!=(t=null==(o=e.ownerDocument)?void 0:o.defaultView)?t:window:window}function u(e){const{Document:t}=o(e);return e instanceof t}function c(e){return!n(e)&&e instanceof o(e).HTMLElement}function s(e){return e instanceof o(e).SVGElement}const i=t?e.useLayoutEffect:e.useEffect;function a(t){const n=e.useRef(t);return i(()=>{n.current=t}),e.useCallback((function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return null==n.current?void 0:n.current(...t)}),[])}let l={};function f(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.reduce((t,n)=>{const r=Object.entries(n);for(const[n,o]of r){const r=t[n];null!=r&&(t[n]=r+e*o)}return t},{...t})}}const d=f(1),p=f(-1);function x(e){return"clientX"in e&&"clientY"in e}function m(e){if(!e)return!1;const{TouchEvent:t}=o(e.target);return t&&e instanceof t}const h=Object.freeze({Translate:{toString(e){if(!e)return;const{x:t,y:n}=e;return"translate3d("+(t?Math.round(t):0)+"px, "+(n?Math.round(n):0)+"px, 0)"}},Scale:{toString(e){if(!e)return;const{scaleX:t,scaleY:n}=e;return"scaleX("+t+") scaleY("+n+")"}},Transform:{toString(e){if(e)return[h.Translate.toString(e),h.Scale.toString(e)].join(" ")}},Transition:{toString(e){let{property:t,duration:n,easing:r}=e;return t+" "+n+"ms "+r}}}),b="a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";exports.CSS=h,exports.add=d,exports.canUseDOM=t,exports.findFirstFocusableNode=function(e){return e.matches(b)?e:e.querySelector(b)},exports.getEventCoordinates=function(e){if(m(e)){if(e.touches&&e.touches.length){const{clientX:t,clientY:n}=e.touches[0];return{x:t,y:n}}if(e.changedTouches&&e.changedTouches.length){const{clientX:t,clientY:n}=e.changedTouches[0];return{x:t,y:n}}}return x(e)?{x:e.clientX,y:e.clientY}:null},exports.getOwnerDocument=function(e){return e?n(e)?e.document:r(e)?u(e)?e:c(e)||s(e)?e.ownerDocument:document:document:document},exports.getWindow=o,exports.hasViewportRelativeCoordinates=x,exports.isDocument=u,exports.isHTMLElement=c,exports.isKeyboardEvent=function(e){if(!e)return!1;const{KeyboardEvent:t}=o(e.target);return t&&e instanceof t},exports.isNode=r,exports.isSVGElement=s,exports.isTouchEvent=m,exports.isWindow=n,exports.subtract=p,exports.useCombinedRefs=function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return e.useMemo(()=>e=>{n.forEach(t=>t(e))},n)},exports.useEvent=a,exports.useInterval=function(){const t=e.useRef(null);return[e.useCallback((e,n)=>{t.current=setInterval(e,n)},[]),e.useCallback(()=>{null!==t.current&&(clearInterval(t.current),t.current=null)},[])]},exports.useIsomorphicLayoutEffect=i,exports.useLatestValue=function(t,n){void 0===n&&(n=[t]);const r=e.useRef(t);return i(()=>{r.current!==t&&(r.current=t)},n),r},exports.useLazyMemo=function(t,n){const r=e.useRef();return e.useMemo(()=>{const e=t(r.current);return r.current=e,e},[...n])},exports.useNodeRef=function(t){const n=a(t),r=e.useRef(null),o=e.useCallback(e=>{e!==r.current&&(null==n||n(e,r.current)),r.current=e},[]);return[r,o]},exports.usePrevious=function(t){const n=e.useRef();return e.useEffect(()=>{n.current=t},[t]),n.current},exports.useUniqueId=function(t,n){return e.useMemo(()=>{if(n)return n;const e=null==l[t]?0:l[t]+1;return l[t]=e,t+"-"+e},[t,n])};
+//# sourceMappingURL=utilities.cjs.production.min.js.map
@@ -0,0 +1,333 @@
+import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from 'react';
+
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return useMemo(() => node => {
+    refs.forEach(ref => ref(node));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
+// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === '[object Window]' || // In Electron context the Window object serializes to [object global]
+  elementString === '[object global]';
+}
+
+function isNode(node) {
+  return 'nodeType' in node;
+}
+
+function getWindow(target) {
+  var _target$ownerDocument, _target$ownerDocument2;
+
+  if (!target) {
+    return window;
+  }
+
+  if (isWindow(target)) {
+    return target;
+  }
+
+  if (!isNode(target)) {
+    return window;
+  }
+
+  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+
+function isDocument(node) {
+  const {
+    Document
+  } = getWindow(node);
+  return node instanceof Document;
+}
+
+function isHTMLElement(node) {
+  if (isWindow(node)) {
+    return false;
+  }
+
+  return node instanceof getWindow(node).HTMLElement;
+}
+
+function isSVGElement(node) {
+  return node instanceof getWindow(node).SVGElement;
+}
+
+function getOwnerDocument(target) {
+  if (!target) {
+    return document;
+  }
+
+  if (isWindow(target)) {
+    return target.document;
+  }
+
+  if (!isNode(target)) {
+    return document;
+  }
+
+  if (isDocument(target)) {
+    return target;
+  }
+
+  if (isHTMLElement(target) || isSVGElement(target)) {
+    return target.ownerDocument;
+  }
+
+  return document;
+}
+
+/**
+ * A hook that resolves to useEffect on the server and useLayoutEffect on the client
+ * @param callback {function} Callback function that is invoked when the dependencies of the hook change
+ */
+
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+
+function useEvent(handler) {
+  const handlerRef = useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+  }, []);
+}
+
+function useInterval() {
+  const intervalRef = useRef(null);
+  const set = useCallback((listener, duration) => {
+    intervalRef.current = setInterval(listener, duration);
+  }, []);
+  const clear = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  return [set, clear];
+}
+
+function useLatestValue(value, dependencies) {
+  if (dependencies === void 0) {
+    dependencies = [value];
+  }
+
+  const valueRef = useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, dependencies);
+  return valueRef;
+}
+
+function useLazyMemo(callback, dependencies) {
+  const valueRef = useRef();
+  return useMemo(() => {
+    const newValue = callback(valueRef.current);
+    valueRef.current = newValue;
+    return newValue;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [...dependencies]);
+}
+
+function useNodeRef(onChange) {
+  const onChangeHandler = useEvent(onChange);
+  const node = useRef(null);
+  const setNodeRef = useCallback(element => {
+    if (element !== node.current) {
+      onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
+    }
+
+    node.current = element;
+  }, //eslint-disable-next-line
+  []);
+  return [node, setNodeRef];
+}
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+let ids = {};
+function useUniqueId(prefix, value) {
+  return useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+    ids[prefix] = id;
+    return prefix + "-" + id;
+  }, [prefix, value]);
+}
+
+function createAdjustmentFn(modifier) {
+  return function (object) {
+    for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      adjustments[_key - 1] = arguments[_key];
+    }
+
+    return adjustments.reduce((accumulator, adjustment) => {
+      const entries = Object.entries(adjustment);
+
+      for (const [key, valueAdjustment] of entries) {
+        const value = accumulator[key];
+
+        if (value != null) {
+          accumulator[key] = value + modifier * valueAdjustment;
+        }
+      }
+
+      return accumulator;
+    }, { ...object
+    });
+  };
+}
+
+const add = /*#__PURE__*/createAdjustmentFn(1);
+const subtract = /*#__PURE__*/createAdjustmentFn(-1);
+
+function hasViewportRelativeCoordinates(event) {
+  return 'clientX' in event && 'clientY' in event;
+}
+
+function isKeyboardEvent(event) {
+  if (!event) {
+    return false;
+  }
+
+  const {
+    KeyboardEvent
+  } = getWindow(event.target);
+  return KeyboardEvent && event instanceof KeyboardEvent;
+}
+
+function isTouchEvent(event) {
+  if (!event) {
+    return false;
+  }
+
+  const {
+    TouchEvent
+  } = getWindow(event.target);
+  return TouchEvent && event instanceof TouchEvent;
+}
+
+/**
+ * Returns the normalized x and y coordinates for mouse and touch events.
+ */
+
+function getEventCoordinates(event) {
+  if (isTouchEvent(event)) {
+    if (event.touches && event.touches.length) {
+      const {
+        clientX: x,
+        clientY: y
+      } = event.touches[0];
+      return {
+        x,
+        y
+      };
+    } else if (event.changedTouches && event.changedTouches.length) {
+      const {
+        clientX: x,
+        clientY: y
+      } = event.changedTouches[0];
+      return {
+        x,
+        y
+      };
+    }
+  }
+
+  if (hasViewportRelativeCoordinates(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  return null;
+}
+
+const CSS = /*#__PURE__*/Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
+    }
+
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+
+  }
+});
+
+const SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';
+function findFirstFocusableNode(element) {
+  if (element.matches(SELECTOR)) {
+    return element;
+  }
+
+  return element.querySelector(SELECTOR);
+}
+
+export { CSS, add, canUseDOM, findFirstFocusableNode, getEventCoordinates, getOwnerDocument, getWindow, hasViewportRelativeCoordinates, isDocument, isHTMLElement, isKeyboardEvent, isNode, isSVGElement, isTouchEvent, isWindow, subtract, useCombinedRefs, useEvent, useInterval, useIsomorphicLayoutEffect, useLatestValue, useLazyMemo, useNodeRef, usePrevious, useUniqueId };
+//# sourceMappingURL=utilities.esm.js.map
@@ -0,0 +1,37 @@
+{
+  "name": "@dnd-kit/utilities",
+  "version": "3.2.2",
+  "description": "Internal utilities to bee shared between `@dnd-kit` packages",
+  "author": "Claudéric Demers",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clauderic/dnd-kit.git",
+    "directory": "packages/utilities"
+  },
+  "scripts": {
+    "start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean",
+    "build": "tsdx build --tsconfig tsconfig.build.json",
+    "test": "tsdx test",
+    "lint": "tsdx lint",
+    "prepublish": "npm run build"
+  },
+  "main": "dist/index.js",
+  "module": "dist/utilities.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "dist"
+  ],
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
				`@@ -0,0 +1 @@`
				`export declare function hasViewportRelativeCoordinates(event: Event): event is Event & Pick<PointerEvent, 'clientX' \| 'clientY'>;`
				`@@ -0,0 +1 @@`
				`export declare function isKeyboardEvent(event: Event \| undefined \| null): event is KeyboardEvent;`
				`@@ -0,0 +1 @@`
				`export declare function isTouchEvent(event: Event \| undefined \| null): event is TouchEvent;`
				`@@ -0,0 +1 @@`
				`export declare function getOwnerDocument(target: Event['target']): Document;`
				`@@ -0,0 +1 @@`
				`export declare function getWindow(target: Event['target']): typeof window;`
				`@@ -0,0 +1 @@`
				`export declare function findFirstFocusableNode(element: HTMLElement): HTMLElement \| null;`
				`@@ -0,0 +1 @@`
				`export { findFirstFocusableNode } from './findFirstFocusableNode';`
				`@@ -0,0 +1 @@`
				`export declare function useCombinedRefs<T>(...refs: ((node: T) => void)[]): (node: T) => void;`
				`@@ -0,0 +1 @@`
				`export declare function useEvent<T extends Function>(handler: T \| undefined): (...args: any) => any;`
				`@@ -0,0 +1 @@`
				`export declare function useInterval(): readonly [(listener: Function, duration: number) => void, () => void];`