@dnd-kit/utilities - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0-next-202241322536

CHANGELOG.md

 # @dnd-kit/utilities
 
+## 3.2.0-next-202241322536
+
+### Minor Changes
+
+- [#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
@@ -4,0 +10,0 @@

dist/hooks/index.d.ts

 export { useCombinedRefs } from './useCombinedRefs';
+export { useEvent } from './useEvent';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
@@ -7,2 +8,3 @@ export { useInterval } from './useInterval';
 export { useNodeRef } from './useNodeRef';
+export { usePrevious } from './usePrevious';
 export { useUniqueId } from './useUniqueId';

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { useCombinedRefs, useIsomorphicLayoutEffect, useInterval, useLatestValue, useLazyMemo, useNodeRef, useUniqueId, } from './hooks';
+export { useCombinedRefs, useEvent, useIsomorphicLayoutEffect, useInterval, useLatestValue, useLazyMemo, useNodeRef, usePrevious, useUniqueId, } from './hooks';
 export { add, subtract } from './adjustment';
@@ -10,2 +10,2 @@ export type { Coordinates } from './coordinates';
 export { isDocument, isHTMLElement, isNode, isSVGElement, isWindow, } from './type-guards';
-export type { Arguments, FirstArgument, Without } from './types';
+export type { Arguments, DeepRequired, FirstArgument, Without } from './types';

dist/types.d.ts

 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>>;

dist/utilities.cjs.development.js

@@ -95,2 +95,12 @@ 'use strict';
 
+function useEvent(handler) {
+  const handlerRef = react.useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return react.useCallback(function (...args) {
+    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+  }, []);
+}
+
 function useInterval() {
@@ -131,7 +141,7 @@ const intervalRef = react.useRef(null);
 function useNodeRef(onChange) {
-  const onChangeRef = useLatestValue(onChange);
+  const onChangeHandler = useEvent(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);
+      onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
     }
@@ -145,2 +155,10 @@
 
+function usePrevious(value) {
+  const ref = react.useRef();
+  react.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
 let ids = {};
@@ -311,2 +329,3 @@ function useUniqueId(prefix, value) {
 exports.useCombinedRefs = useCombinedRefs;
+exports.useEvent = useEvent;
 exports.useInterval = useInterval;
@@ -317,3 +336,4 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useNodeRef = useNodeRef;
+exports.usePrevious = usePrevious;
 exports.useUniqueId = useUniqueId;
 //# sourceMappingURL=utilities.cjs.development.js.map

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;function i(t,n=[t]){const r=e.useRef(t);return s(()=>{r.current!==t&&(r.current=t)},n),r}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])};
+"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}),e.useCallback((function(...e){return null==n.current?void 0:n.current(...e)}),[])}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.useEvent=i,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=function(t,n=[t]){const r=e.useRef(t);return s(()=>{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=i(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

dist/utilities.esm.js

@@ -91,2 +91,12 @@ import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from 'react';
 
+function useEvent(handler) {
+  const handlerRef = useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback(function (...args) {
+    return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+  }, []);
+}
+
 function useInterval() {
@@ -127,7 +137,7 @@ const intervalRef = useRef(null);
 function useNodeRef(onChange) {
-  const onChangeRef = useLatestValue(onChange);
+  const onChangeHandler = useEvent(onChange);
   const node = useRef(null);
   const setNodeRef = useCallback(element => {
     if (element !== node.current) {
-      onChangeRef.current == null ? void 0 : onChangeRef.current(element, node.current);
+      onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
     }
@@ -141,2 +151,10 @@
 
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
 let ids = {};
@@ -291,3 +309,3 @@ function useUniqueId(prefix, value) {
 
-export { CSS, add, canUseDOM, getEventCoordinates, getOwnerDocument, getWindow, hasViewportRelativeCoordinates, isDocument, isHTMLElement, isKeyboardEvent, isNode, isSVGElement, isTouchEvent, isWindow, subtract, useCombinedRefs, useInterval, useIsomorphicLayoutEffect, useLatestValue, useLazyMemo, useNodeRef, useUniqueId };
+export { CSS, add, canUseDOM, 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

package.json

 {
   "name": "@dnd-kit/utilities",
-  "version": "3.1.0",
+  "version": "3.2.0-next-202241322536",
   "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

83407

increased by6.94%

Number of package files

42

increased by5%

Lines of code

655

increased by6.85%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes