@dnd-kit/utilities - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0-next-202201012117

CHANGELOG.md

 # @dnd-kit/utilities
 
+## 3.1.0-next-202201012117
+
+### 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.
+
+### 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
@@ -4,0 +38,0 @@

dist/coordinates/getEventCoordinates.d.ts

@@ -5,2 +5,2 @@ import type { Coordinates } from './types';
  */
-export declare function getEventCoordinates(event: Event): Coordinates;
+export declare function getEventCoordinates(event: Event): Coordinates | null;

dist/hooks/index.d.ts

 export { useCombinedRefs } from './useCombinedRefs';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 export { useInterval } from './useInterval';
+export { useLatestValue } from './useLatestValue';
 export { useLazyMemo } from './useLazyMemo';
 export { useNodeRef } from './useNodeRef';
 export { useUniqueId } from './useUniqueId';

dist/hooks/useNodeRef.d.ts

 /// <reference types="react" />
-export declare function useNodeRef(): readonly [import("react").MutableRefObject<HTMLElement | null>, (element: HTMLElement | null) => void];
+export declare function useNodeRef(onChange?: (newElement: HTMLElement | null, previousElement: HTMLElement | null) => void): readonly [import("react").MutableRefObject<HTMLElement | null>, (element: HTMLElement | null) => void];

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { useCombinedRefs, useIsomorphicLayoutEffect, useInterval, useLazyMemo, useNodeRef, useUniqueId, } from './hooks';
+export { useCombinedRefs, useIsomorphicLayoutEffect, useInterval, useLatestValue, useLazyMemo, useNodeRef, useUniqueId, } from './hooks';
 export { add, subtract } from './adjustment';
@@ -3,0 +3,0 @@ export type { Coordinates } from './coordinates';

dist/utilities.cjs.development.js

@@ -109,2 +109,12 @@ 'use strict';
 
+function useLatestValue(value) {
+  const valueRef = react.useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, [value]);
+  return valueRef;
+}
+
 function useLazyMemo(callback, dependencies) {
@@ -120,7 +130,13 @@ const valueRef = react.useRef();
 
-function useNodeRef() {
+function useNodeRef(onChange) {
+  const onChangeRef = useLatestValue(onChange);
   const node = react.useRef(null);
   const setNodeRef = react.useCallback(element => {
+    if (element !== node.current) {
+      onChangeRef.current == null ? void 0 : onChangeRef.current(element, node.current);
+    }
+
     node.current = element;
-  }, []);
+  }, //eslint-disable-next-line
+  []);
   return [node, setNodeRef];
@@ -224,6 +240,3 @@ }
 
-  return {
-    x: 0,
-    y: 0
-  };
+  return null;
 }
@@ -300,2 +313,3 @@
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useLatestValue = useLatestValue;
 exports.useLazyMemo = useLazyMemo;
@@ -302,0 +316,0 @@ exports.useNodeRef = useNodeRef;

dist/utilities.cjs.production.min.js

@@ -1,2 +0,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}const s=t?e.useLayoutEffect:e.useEffect;let i={};function a(e){return(t,...n)=>n.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 l=a(1),f=a(-1);function d(e){return"clientX"in e&&"clientY"in e}function p(e){if(!e)return!1;const{TouchEvent:t}=o(e.target);return t&&e instanceof t}const x=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[x.Translate.toString(e),x.Scale.toString(e)].join(" ")}},Transition:{toString:({property:e,duration:t,easing:n})=>`${e} ${t}ms ${n}`}});exports.CSS=x,exports.add=l,exports.canUseDOM=t,exports.getEventCoordinates=function(e){if(p(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 d(e)?{x:e.clientX,y:e.clientY}:{x:0,y:0}},exports.getOwnerDocument=function(e){return e?n(e)?e.document:r(e)?u(e)?e:c(e)?e.ownerDocument:document:document:document},exports.getWindow=o,exports.hasViewportRelativeCoordinates=d,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=function(e){return e instanceof o(e).SVGElement},exports.isTouchEvent=p,exports.isWindow=n,exports.subtract=f,exports.useCombinedRefs=function(...t){return e.useMemo(()=>e=>{t.forEach(t=>t(e))},t)},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=s,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(){const t=e.useRef(null),n=e.useCallback(e=>{t.current=e},[]);return[t,n]},exports.useUniqueId=function(t,n){return e.useMemo(()=>{if(n)return n;const e=null==i[t]?0:i[t]+1;return i[t]=e,`${t}-${e}`},[t,n])};
+"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}const s=t?e.useLayoutEffect:e.useEffect;function i(t){const n=e.useRef(t);return s(()=>{n.current!==t&&(n.current=t)},[t]),n}let l={};function a(e){return(t,...n)=>n.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 f=a(1),d=a(-1);function p(e){return"clientX"in e&&"clientY"in e}function x(e){if(!e)return!1;const{TouchEvent:t}=o(e.target);return t&&e instanceof t}const m=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[m.Translate.toString(e),m.Scale.toString(e)].join(" ")}},Transition:{toString:({property:e,duration:t,easing:n})=>`${e} ${t}ms ${n}`}});exports.CSS=m,exports.add=f,exports.canUseDOM=t,exports.getEventCoordinates=function(e){if(x(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 p(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)?e.ownerDocument:document:document:document},exports.getWindow=o,exports.hasViewportRelativeCoordinates=p,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=function(e){return e instanceof o(e).SVGElement},exports.isTouchEvent=x,exports.isWindow=n,exports.subtract=d,exports.useCombinedRefs=function(...t){return e.useMemo(()=>e=>{t.forEach(t=>t(e))},t)},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=s,exports.useLatestValue=i,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=i(t),r=e.useRef(null),o=e.useCallback(e=>{e!==r.current&&(null==n.current||n.current(e,r.current)),r.current=e},[]);return[r,o]},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

dist/utilities.esm.js

@@ -105,2 +105,12 @@ import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from 'react';
 
+function useLatestValue(value) {
+  const valueRef = useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+    }
+  }, [value]);
+  return valueRef;
+}
+
 function useLazyMemo(callback, dependencies) {
@@ -116,7 +126,13 @@ const valueRef = useRef();
 
-function useNodeRef() {
+function useNodeRef(onChange) {
+  const onChangeRef = useLatestValue(onChange);
   const node = useRef(null);
   const setNodeRef = useCallback(element => {
+    if (element !== node.current) {
+      onChangeRef.current == null ? void 0 : onChangeRef.current(element, node.current);
+    }
+
     node.current = element;
-  }, []);
+  }, //eslint-disable-next-line
+  []);
   return [node, setNodeRef];
@@ -220,6 +236,3 @@ }
 
-  return {
-    x: 0,
-    y: 0
-  };
+  return null;
 }
@@ -278,3 +291,3 @@
 
-export { CSS, add, canUseDOM, getEventCoordinates, getOwnerDocument, getWindow, hasViewportRelativeCoordinates, isDocument, isHTMLElement, isKeyboardEvent, isNode, isSVGElement, isTouchEvent, isWindow, subtract, useCombinedRefs, useInterval, useIsomorphicLayoutEffect, useLazyMemo, useNodeRef, useUniqueId };
+export { CSS, add, canUseDOM, getEventCoordinates, getOwnerDocument, getWindow, hasViewportRelativeCoordinates, isDocument, isHTMLElement, isKeyboardEvent, isNode, isSVGElement, isTouchEvent, isWindow, subtract, useCombinedRefs, useInterval, useIsomorphicLayoutEffect, useLatestValue, useLazyMemo, useNodeRef, useUniqueId };
 //# sourceMappingURL=utilities.esm.js.map

package.json

 {
   "name": "@dnd-kit/utilities",
-  "version": "3.0.2",
+  "version": "3.1.0-next-202201012117",
   "description": "Internal utilities to bee shared between `@dnd-kit` packages",
@@ -5,0 +5,0 @@ "author": "Claudéric Demers",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77697

increased by10.97%

Number of package files

40

increased by2.56%

Lines of code

613

increased by4.61%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes